2017-03-02 20 views
0

棒グラフにラベルを追加しようとしています。以下のJSフィドルとコードを参照してください。ラベルを追加するためにコードを変更するにはどうすればよいですか?ラベルをChartsJS棒グラフに追加する

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

[Chart.js canvasプラグインにラベルを追加する方法は?](http://stackoverflow.com/questions/16590301/how-to-add-labels-into -chart-js-canvas-plugin) – nico

+0

[chart.jsの各スライスの円グラフデータ値を表示するにはどうすればいいですか?](http://stackoverflow.com/questions/33363373/how-to-表示 - パイチャート - データ - 値 - 各スライス - チャート - js) – jordanwillis

答えて

1

私はあなたのjsfiddleは、それは私がのためのドキュメントを見つけることができるすべてであるとして1.私の答えは、バージョン2を使用していますchart.jsバージョンを使用して気づきました。あなたがする必要があるすべては、データオブジェクトにラベルをつけているよう

はルックス:

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を使用しています)

+0

パーフェクト!ありがとうございました! – AndrewLeonardi

関連する問題