我正在使用 chartjs 在条形图中可视化一些数据。标签很长,所以我把它们剪掉了。但是,我想让工具提示(悬停时)的文本成为原始文本。我可以使用默认的 chartjs 配置实现吗?
我使用以下方法生成图表:
function DrawChart(canvasID, remoteFields, remoteData, remoteColors, remoteBorderColors) {
var ctx = document.getElementById(canvasID).getContext('2d');
var orig = remoteFields;
var maxLabelLength = 20;
for(var i = 0; i < remoteFields.length; i++) {
if(remoteFields[i].length > maxLabelLength) {
remoteFields[i] = remoteFields[i].substring(0,maxLabelLength) + "...";
}
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: remoteFields,
datasets: [{
data: remoteData,
backgroundColor: remoteColors,
borderColor: remoteBorderColors,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
stepSize: 1
}
}]
},
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
}
}
});
}
最佳答案
您可以使用ticks 回调 函数(用于 trim x 轴标签) 和tooltips callback 来实现此目的功能(在工具提示上显示原始文本)
var ctx = document.getElementById('c').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
data: [1, 2, 3, 4, 5],
backgroundColor: ['#30799f', '#ac51c3', '#4ba57b', '#e3297d', '#e35c32'],
borderColor: ['#30799f', '#ac51c3', '#4ba57b', '#e3297d', '#e35c32'],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
xAxes: [{
ticks: {
callback: function(t) {
var maxLabelLength = 3;
if (t.length > maxLabelLength) return t.substr(0, maxLabelLength) + '...';
else return t;
}
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
},
legend: {
display: false
},
tooltips: {
callbacks: {
title: function(t, d) {
return d.labels[t[0].index];
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="c" width="350" height="200"></canvas>
关于javascript - ChartJS - 设置与 x 轴描述不同的悬停文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44355320/