javascript - 向 Chart.js 条形图添加标签

Question

我正在尝试向我的条形图添加标签。请参阅下面的 JS fiddle 和代码。我如何更改代码以添加标签？

http://jsfiddle.net/amwmedia/8kqvyhqv/

var myNewChart;
var data = [
    {
    value: 30,
    label: "hello",
    color: "#F7464A"
  }, {
    value: 50,
    color: "#E2EAE9"
  }, {
    value: 100,
    color: "#D4CCC5"
  }, {
    value: 40,
    color: "#949FB1"
  }, {
    value: 100,
    color: "#4D5360"
  },

];


var options = {
  animation: true,
  animationEasing: 'easeInOutQuart',
  animationSteps: 80,
  multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"

};


var ctx = document.getElementById("myChart")
                                    .getContext("2d");

myNewChart = new Chart(ctx).Doughnut(data, options);

Answer 1

我注意到您的 jsfiddle 使用的是 Chart.js 版本 1。我的答案使用版本 2，因为这是我能找到的所有文档。

看起来您需要做的就是将标签放入数据对象中:

var data = {
  labels: [
   "label1",
   "label2",
   "label3",
   "label4",
   "label5"
    ],
  datasets: [
   {
    data: [
     30,
     50,
     100,
     40,
     100
     ],
    backgroundColor:[
     '#F7464A',
     '#E2EAE9',
     '#D4CCC5',
     '#949FB1',
     '#4D5360'
    ]
   }]
};

参见fiddle 。 (这是使用 Chart.js 2.0)