在ChartJS图表的工具提示中添加多个值

Question

我已经使用Laravel上的ChartJS库创建了多折线图。它有两条线。我想将百分比数据添加到每个xLabel的折线图工具提示中。但是我不能在此包装器中使用它。你能帮我吗？

示例：行：数据（percent_data）％

下面的代码仅在图表工具提示中提供了第一个元素

var ctx = document.getElementById("myLineChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: label,
    datasets: [{
      label: "Line",
      data: data,
      percent_data: per_data_from_html,
    }],
  },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, chart) {
          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
          return datasetLabel + ': ₹ ' + number_format(tooltipItem.yLabel)+' ('+ (chart.datasets[tooltipItem.datasetIndex].percent_data[tooltipItem.datasetIndex]);
        }
      }
    }
  }
});

Answer 1

通过将通过percent_data数组的参数从percent_data[tooltipItem.datasetIndex]更改为percent_data[tooltipItem.index]。

tooltips: {
  enabled: true,
  callbacks: {
    label: function(tooltipItem, chart) {
      var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
      return datasetLabel + ': ₹ ' + chart.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + ' (' + chart.datasets[tooltipItem.datasetIndex].percent_data[tooltipItem.index] + ')%';
    }
  }
}