将标签添加到Chart.js条形图

时间:2017-03-02 19:48:01

标签: javascript jquery charts chart.js

我正在尝试在条形图中添加标签。请参阅下面的JS小提琴和代码。如何更改我的代码以添加标签?

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);

1 个答案:

答案 0 :(得分: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)