前提
私は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はコード内にあるように、サイトから読み込んでいます。
0 コメント