質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

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

infra_se_124
infra_se_124

総合スコア1

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

1グッド

2クリップ

264閲覧

投稿2022/11/22 09:09

前提

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/ツールのバージョンなど)

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

Cocode👏を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

2

ベストアンサー

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

コード例

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

投稿2022/11/22 14:27

編集2022/11/22 14:28
Cocode

総合スコア2245

spoofy_dragon, mjk👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

infra_se_124

2022/11/23 01:00

まさに実施したかった内容です。 項目が増えた場合も試し、正常動作を確認しました。 また、JSFIDDLEのサービスも知らなかったので勉強になりました。ありがとうございます!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。