为什么这个 ChartJS 的工具提示回调有效，而这不起作用

Question

我试图回调以绘制工具提示。我在这里尝试这个代码，但它不起作用：

tooltips: {
callbacks: {
labelColor : function(tooltipItem, chartInstance){
return {
backgroundColor : data.datasets[tooltipItem.datasetIndex].backgroundColor,
borderColor : data.datasets[tooltipItem.datasetIndex].backgroundColor
};
}
}
}

直到我发现我需要这样做：

tooltips: {
callbacks: {
labelColor: function(tooltipItem, chart) {
return {
backgroundColor : chart.config.data.datasets[tooltipItem.datasetIndex].backgroundColor,
borderColor : chart.config.data.datasets[tooltipItem.datasetIndex].backgroundColor
}
}
}
}

所以不同的是，我试图访问这样的颜色：

data.datasets[tooltipItem.datasetIndex].backgroundColor

正确的答案是这样访问的：

chart.config.data.datasets[tooltipItem.datasetIndex].backgroundColor

我很困惑，因为我已经编辑了工具提示的标题和图例，在没有'chart.config'.的情况下访问了我的数据集

这项工作：

tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.value + '%'
}                 
}

那么，为什么在一种情况下，我可以使用data.dataset[tooltipItem.datasetIndex]访问数据，而另一种情况则需要chart.config.dataset[stooltipItems.datasetIndex]

Answer 1

您的第一个代码段也可以使用

tooltips: {
callbacks: {
labelColor : function(tooltipItem, chartInstance){
return {
backgroundColor : data.datasets[tooltipItem.datasetIndex].backgroundColor,
borderColor : data.datasets[tooltipItem.datasetIndex].backgroundColor
};
}
}
}

这里labelColor的回调函数有两个参数。第二个参数chartInstance包含您需要的数据和其他属性，但您正在尝试访问data.datasets而不是chartInstance.data.datasets。

查看这个示例片段。

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {
tooltips: {
callbacks: {
labelColor: function(tooltipItem, chartInstance) {
debugger;
return {
backgroundColor: chartInstance.data.datasets[tooltipItem.datasetIndex].backgroundColor,
borderColor: chartInstance.data.datasets[tooltipItem.datasetIndex].backgroundColor
};
},

label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += Math.round(tooltipItem.yLabel * 100) / 100;
label += ' custom'
return label;
}
}
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>