🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Chart.js

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

2196閲覧

node.js + express.js でのchart.jsによる動的多線グラフ表示

HYDESA

総合スコア8

Chart.js

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2021/01/08 02:31

前提・実現したいこと

お世話になります。
chart.jsで多線の折れ線グラフをDBから動的にセットしたいのですが、
他のサイトを参考にしても、うまく表示されません。

折れ線の数は今のところ決まっていませんが(10線以上?)
いずれは折れ線単位でチェックボックスによる非表示を
設ける予定です。

発生している問題・エラーメッセージ

グラフが表示されない

該当のソースコード

javascript

1 2// 前略 3var label = ["A","B","C"]; 4var data = [20,10,30]; 5 6function setGraphData(){ 7 var data = { 8 labels: label1, 9 datasets:[] 10 }; 11 // いずれはここでfor文にて折れ線グラフを多線にしたい 12 var setData = "{label: 'test1'"; 13 setData = setData + "borderColor: '#ff0000',";// いずれは折れ線単位で色分け 14 setData = setData + 'lineTension: 0,'; 15 setData = setData + 'fill: false,'; 16 setData = setData + 'borderWidth: 2,'; 17 setData = setData + 'pointRadius: 1,'; 18 setData = setData + `data: ${data}}`; 19 20 data.datasets.push(setData); 21 return ( data ); 22} 23 24function setGraphOptions(){ 25 // 中略 26} 27 28var temp_Chart = new Chart(ctx, { 29 type: 'line', 30 data: setGraphData(), 31 options: setGraphOptions() 32}); 33// 後略

試したこと

javascript

1data.datasets.push(setData); のところで 2 3var newDataset = (new Function("return " + setData))(); 4data.datasets.push(newDataset ); と置き換えてやってみたり、 5 6data.datasets.push(setData); を消して 7data[]の中で pointRadius: 1 までをベタ書きして、 8data.datasets.data = `,data: ${data}}`; とやってみても 9うまく動きませんでした。

すいませんが、ご教示ください。
よろしくお願い致します。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

すいません、自己解決しました。
オブジェクトの構成をいまいち把握できていませんでした。

javascript

1data.datasets[0].label = 'test1';

の方法で解決しました。
ありがとうございました。

~追記~
自分自身の備忘録として、全体を記載しておきます。

javascript

1var data = { 2 labels: label1, 3 datasets:[{}] // ← {}が必要 4 }; 5 6data.datasets[0].label = 'test1'; 7data.datasets[0].data = data; 8data.datasets[0].borderColor = '#ff0000'; 9・・・

と記述していくだけでした。

投稿2021/01/08 02:52

編集2021/01/08 04:07
HYDESA

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問