表示対象項目が増減するJSONデータからChart.jsでグラフ表示したい

前提

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
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>棒グラフ</title>
6    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
7</head>
8
9<body>
10
11<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
12
13<canvas id="myChart" width="800" height="100"></canvas>
14<script>
15var ctx = document.getElementById('myChart').getContext('2d');
16
17var myChart = new Chart(ctx, {
18    type: 'horizontalBar',
19    data: {
20        labels: ["機器01"],
21        datasets: [{
22            label: 'STOP',
23            data: [0.5],
24             backgroundColor: [
25                'rgba(220, 20, 60, 0.9)'
26            ],
27            borderColor: [
28                'rgba(0, 0, 0, 1)'
29            ],
30            borderWidth: 0.5
31        },
32        {
33            label: 'Alarm',
34            data: [10],
35             backgroundColor: [
36                'rgba(255, 215, 0, 0.9)'
37            ],
38            borderColor: [
39                'rgba(0, 0, 0, 1)'
40            ],
41            borderWidth: 0.5
42        }
43        ]
44    },
45    options: {
46      responsive: false,
47      scales: {
48        xAxes: [{
49          stacked: true,
50          ticks: {
51            max: 12,
52            stepSize: 1,
53          }
54        }],
55        yAxes: [{
56          stacked: true
57            }]
58        }
59    }
60});
61</script>
62</body>
63</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

与えられた配列を、chart.jsのdatasetsに沿った形に作り変えて、インスタンスのmyChartを生成するときにそのままつっこむ、のはいかがでしょう？

コード例

動作確認用サンプル：https://jsfiddle.net/Ls9r0cwn/

javascript
1// 与えられる配列
2const inputArr = [{
3    "label": "STOP",
4    "data": 0.5,
5    "backgroundColor": "rgba(220, 20, 60, 0.9)",
6    "borderColor": "rgba(0, 0, 0, 1)",
7    "borderWidth": 0.5
8  },
9  {
10    "label": "Alarm",
11    "data": 10,
12    "backgroundColor": "rgba(255, 215, 0, 0.9)",
13    "borderColor": "rgba(0, 0, 0, 1)",
14    "borderWidth": 0.5
15  }
16];
17
18// datasets用に配列の中の各要素（オブジェクト）を作り変えて、新規配列を生成
19const datasets = inputArr.map(obj => ({
20  label: obj.label,
21  data: [obj.data],
22  backgroundColor: [obj.backgroundColor],
23  borderColor: [obj.borderColor],
24  borderWidth: 0.5
25}));
26// ↓これが出来上がる
27// [{
28//   "label": "STOP",
29//   "data": [0.5],
30//   "backgroundColor": ["rgba(220, 20, 60, 0.9)"],
31//   "borderColor": ["rgba(0, 0, 0, 1)"],
32//   "borderWidth": 0.5
33// }, {
34//   "label": "Alarm",
35//   "data": [10],
36//   "backgroundColor": ["rgba(255, 215, 0, 0.9)"],
37//   "borderColor": ["rgba(0, 0, 0, 1)"],
38//   "borderWidth": 0.5
39// }]
40
41
42const ctx = document.getElementById('myChart').getContext('2d');
43
44const myChart = new Chart(ctx, {
45  type: 'horizontalBar',
46  data: {
47    labels: ["機器01"],
48    datasets: datasets // つくった配列ここに突っ込む
49  },
50  options: {
51    responsive: false,
52    scales: {
53      xAxes: [{
54        stacked: true,
55        ticks: {
56          max: 12,
57          stepSize: 1,
58        }
59      }],
60      yAxes: [{
61        stacked: true
62      }]
63    }
64  }
65});