为什么针对ChartJS的此Tooltip回调有效，而无效

如何解决为什么针对ChartJS的此Tooltip回调有效，而无效

我试图进行回调以绘制我的工具提示。我在这里尝试此代码，但没有用：

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.datasets [tooltipItem.datasetIndex] 访问数据，而另一种情况需要 chart.config.data.datasets [tooltipItem.datasetIndex]

解决方法

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

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,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>