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

时间:2017-05-17 06:11:52

标签: javascript html chart.js2

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

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

tooltip with all values

这是我目前的代码:

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/

1 个答案:

答案 0 :(得分:2)

您可以通过将tooltips interaction mode更改为"数据集"来完成此操作:

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

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