Charts.js - 如何为每个数据集设置自定义工具提示文本

Question

Charts.js - 如何为每个数据集设置自定义工具提示文本

javascriptchart.js

3

使用charts.js，我该如何为每个数据集添加自定义工具提示文本？

对于数据集1，我想在工具提示中添加“一些文本1”。

对于数据集2，我想在工具提示中添加“一些文本2”。

使用tooltip callbacks，我可以向工具提示添加额外的文本，但它会将相同的文本应用于两个数据集的工具提示。我的下面的代码正在使用回调来实现这一点。但是，我如何更改每个数据集的工具提示文本？

var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: "line",
  // The data for our dataset
  data: {
    labels: monthLabels,
    datasets: [{
      label: "Dataset 1",
      data: [12, 123, 234, 32, 23],
    }, {
      label: "Dataset 2",
      data: [4, 54, 765, 45, 5],
    }]
  },
  // Configuration options go here
  options: {
    tooltips: {
      enabled: true,
      mode: 'single',
      callbacks: {
        label: function(tooltipItems, data) {
          return tooltipItems.yLabel + 'some text here';
        }
      }
    }
  }
});

- TinyTiger

你试过读这个吗？https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- palaѕн · Accepted Answer

您可以通过引用当前数据集索引tooltipItems.datasetIndex来轻松完成此操作，然后根据该索引设置工具提示文本，例如：

label: function(tooltipItems, data) {
    var text = tooltipItems.datasetIndex === 0 ? 'some text 1' : 'some text 2'
    return tooltipItems.yLabel + ' ' + text;
}

工作演示：

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: Array.from({length: 5}, (x,i)=> `Label ${i+1}`),
    datasets: [{
      label: "Dataset 1",
      data: [12, 123, 234, 32, 23],
    }, {
      label: "Dataset 2",
      data: [4, 54, 765, 45, 5],
    }]
  },
  // Configuration options go here
  options: {
    tooltips: {
      enabled: true,
      mode: 'single',
      callbacks: {
        label: function(tooltipItems, data) {
          var text = tooltipItems.datasetIndex === 0 ? 'some text 1' : 'some text 2'
          return tooltipItems.yLabel + ' ' + text;
        }
      }
    }
  }
});

.chart-container {
   width: 500px;
}
#myChart {
  display: block; 
  width: 500px; 
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<div class="chart-container">
    <canvas id="myChart"></canvas>
</div>