前提
Chart.js 2.9で積み上げ横棒グラフを作成しています。
datesets内の項目をJSONで受け取り、指定できるようにしたいです。
実現したいこと
例えば以下のJSONを受け取ると
[{"label": "STOP","data": 0.5,"backgroundColor": "rgba(220, 20, 60, 0.9)","borderColor": "rgba(0, 0, 0, 1)","borderWidth": 0.5},
{"label": "Alarm","data": 10,"backgroundColor": "rgba(255, 215, 0, 0.9)","borderColor": "rgba(0, 0, 0, 1)","borderWidth": 0.5}]
上記に合わせて下記のようにグラフを表示させたいです。
この時、上記の場合は、項目は2つだけですが
JSONに記述してある数だけ動的に増やして表示させたいです。
例えば、項目が3つに変化↓
[{"label": "STOP","data": 0.5,"backgroundColor": "rgba(220, 20, 60, 0.9)","borderColor": "rgba(0, 0, 0, 1)","borderWidth": 0.5},
{"label": "Alarm","data": 10,"backgroundColor": "rgba(255, 215, 0, 0.9)","borderColor": "rgba(0, 0, 0, 1)","borderWidth": 0.5},
{"label": "STOP","data": 1.5,"backgroundColor": "rgba(220, 20, 60, 0.9)","borderColor": "rgba(0, 0, 0, 1)","borderWidth": 0.5}]
該当のソースコード
項目数が固定の場合は、下記のように直接書きますが
JSONで受け取り、かつ、項目も増える可能性がある場合
どのように変数を用意して書けばいいのかわかりません。
取っ掛かりだけでも結構ですので、ご教示いただけませんでしょうか。。
JavaScript
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>棒グラフ</title> <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/></head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="myChart" width="800" height="100"></canvas><script>var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'horizontalBar', data: { labels: ["機器01"], datasets: [{ label: 'STOP', data: [0.5], backgroundColor: [ 'rgba(220, 20, 60, 0.9)' ], borderColor: [ 'rgba(0, 0, 0, 1)' ], borderWidth: 0.5 }, { label: 'Alarm', data: [10], backgroundColor: [ 'rgba(255, 215, 0, 0.9)' ], borderColor: [ 'rgba(0, 0, 0, 1)' ], borderWidth: 0.5 } ] }, options: { responsive: false, scales: { xAxes: [{ stacked: true, ticks: { max: 12, stepSize: 1, } }], yAxes: [{ stacked: true }] } }});</script></body></html>
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント