将标签添加到ChartsJS条形图

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

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

来源

2017-03-02 AndrewLeonardi

可能重复[如何将标签添加到Chart.js画布插件？]（http://stackoverflow.com/questions/16590301/how-to-add-labels-into -chart-js-canvas-plugin） – nico

这肯定是[如何显示chart.js中每个切片的饼图数据值]的副本（http://stackoverflow.com/questions/33363373/how-to- display-pie-chart-data-values-of-slice-in-chart-js） – jordanwillis

我注意到你的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）

来源

2017-03-02 20:38:04

完美！谢谢！ – AndrewLeonardi

将标签添加到ChartsJS条形图

回答

相关问题