在 Chart.js v2 圆环图工具提示中显示所有值

Question

我正在使用 Chart.js v2.5.0.

当用户将鼠标悬停在圆环图上时，我希望工具提示显示所有值，如下图所示：

这是我目前拥有的代码：

var ctx = document.getElementById("chart-area").getContext("2d");
var myPie = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['blue', 'red', 'green', 'orange'],
    datasets: [{
      label: 'Dataset 1',
      data:  [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
      ],
      backgroundColor: [
        chartColors.blue,
        chartColors.red,
        chartColors.green,
        chartColors.orange
      ],
  }],
  },
  options: {
  }
});

JSFiddle Link: https://jsfiddle.net/DUKEiLL/qkop5c9h/

Answer 1

您可以通过将 tooltips interaction mode 更改为 "dataset" 来完成此操作：

options: {
    tooltips: {
        mode: "dataset"
    }
}

JSFiddle 演示：https://jsfiddle.net/qkop5c9h/4/

在 Chart.js v2 圆环图工具提示中显示所有值

Show all values in Chart.js v2 doughnut chart tooltip

html

javascript

chart.js2