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

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

新規登録して質問してみよう
ただいま回答率
85.48%
EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Chart.js

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

Node.js

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

532閲覧

node.js でデータを chart.js に渡す方法を教えてください(解決)

Yasu

総合スコア1

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Chart.js

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

Node.js

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2022/11/20 05:47

編集2022/11/23 01:03

前提

私はnode.js初心者ですが、
現在 node.js, MySql, chart.js を用いて、Web サイトを作成中です。
動作自体はほぼうまくいっているのですが、MySql から読み取ったデータを
chart.js を使って折れ線グラフとして表示する"ejs"に渡す際に一部期待通りに動作しません。

MySql から読み取ったデータを chart.js 用にラベル(日付)と数値データを
リスト化して<%= %>で渡しています。
その結果、数値データのリストは渡せるのですが、ラベル部分は渡せていないようです。

実現したいこと

私の希望としてはラベルリストを引き渡し、グラフを正しく表示できるようにすることです。

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

エラーメッセージは出ていません。
しかし、グラフ表示されるべき場所には何も表示されません。

該当のソースコード

【node.js + HTML】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>グラフ</title> </head> <body> <h1>血圧グラフ</h1> <canvas id="myChart"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> <script> var ctx = document.getElementById("myChart"); var myLineChart = new Chart(ctx, { type: 'line', data: { labels: [<%= health.CDT %>],  // この部分が期待通り動作しない // labels: ['10月02日', '10月03日', '10月10日', '10月04日', '10月10日', '10月11日'], datasets: [ { label: '最高血圧', data: [<%= health.BLH %>], // ここは正常にデータを渡せている borderColor: "rgba(255,0,0,1)", backgroundColor: "rgba(0,0,0,0)" }, { label: '最低血圧', data: [<%= health.BLL %>], // ここは正常にデータを渡せている borderColor: "rgba(0,0,255,1)", backgroundColor: "rgba(0,0,0,0)" } ], }, options: { title: { display: true, text: '血圧' }, scales: { yAxes: [{ ticks: { suggestedMax: 40, suggestedMin: 0, stepSize: 10, callback: function(value, index, values){ return value + 'mmHg' } } }] }, } }); </script> </body> </html>

node.jsで上記のチャート表示用"ejs"に引き渡したデータ(コンソールに表示したもので、変数名:health)。
{
CDT: [ '10月02日', '10月03日', '10月10日', '10月04日', '10月10日', '10月11日' ],
BLH: [ 110, 110, 110, 110, 110, 120 ],
BLL: [ 80, 75, 75, 75, 75, 80 ]
}

試したこと

”//”で潰してある部分(16行目) をデータを引き渡している部分に変えて生かすと、グラフは正常に表示されます。

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

OS : Windows 11
node.jsのバージョン: v16.15.1.
chart.jsはコード内にあるように、サイトから読み込んでいます。

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

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

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

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

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

hoshi-takanori

2022/11/20 21:05

labels: [<%= health.CDT %>], を labels: <%- JSON.stringify(health.CDT) %>, かなぁ。
guest

回答1

0

自己解決

hoshi-takanoriさんの以下のコメントで、解決しました。
labels: [<%= health.CDT %>], を labels: <%- JSON.stringify(health.CDT) %>, かなぁ。

ありがとうございました。

投稿2022/11/23 01:03

Yasu

総合スコア1

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問