javascript - 如何在chart.js中为饼图添加标签

Question

我正在显示饼图。但如何在饼图中显示标签。

下面是饼图的chart.js代码。

this.Pie = function(data, options) {

  chart.Pie.defaults = {
    segmentShowStroke: true,
    segmentStrokeColor: "#fff",
    segmentStrokeWidth: 2,
    animation: true,
    animationSteps: 100,
    animationEasing: "easeOutBounce",
    animateRotate: true,
    animateScale: false,
    onAnimationComplete: null
  };

  var config = (options) ? mergeChartConfig(chart.Pie.defaults, options) : chart.Pie.defaults;

  return new Pie(data, config, context);
};

下面是显示饼图的html文件代码

代码:

var data = [{
  value: 20,
  color: "#637b85"
}, {
  value: 30,
  color: "#2c9c69"
}, {
  value: 40,
  color: "#dbba34"
}, {
  value: 10,
  color: "#c62f29"
}];

var canvas = document.getElementById("hours");
var ctx = canvas.getContext("2d");
new Chart(ctx).Pie(data);

Answer 1

没有必要使用像 newChart 这样的其他库或使用其他人的拉取请求来实现这一点。您所要做的就是定义一个选项对象，并在工具提示中随心所欲地添加标签。

var optionsPie = {
    tooltipTemplate: "<%= label %> - <%= value %>"
}

如果您希望始终显示工具提示，您可以对选项进行一些其他编辑:

 var optionsPie = {
        tooltipEvents: [],
        showTooltips: true,
        onAnimationComplete: function() {
            this.showTooltip(this.segments, true);
        },
        tooltipTemplate: "<%= label %> - <%= value %>"
    }

在数据项中，您必须添加所需的标签属性和值，仅此而已。

data = [
    {
        value: 480000,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Tobacco"
    }
];

现在，您所要做的就是将数据后面的选项对象传递到新 Pie，如下所示:new Chart(ctx).Pie(data,optionsPie) 就完成了。

这可能最适合尺寸不是很小的馅饼。

Pie chart with labels