2024.04.15本記事はプロモーションが含まれています。こんにちは、ENGかぴです。Chart.jsを使用するとブラウザー上にグラフを表示することができます。グラフ表示する関数がjavaScriptでライブラリ化されているためHTMLでscriptでライブラリを読み込み関数に沿ってグラフデータを設定し使用します。本記事ではChart.jsのダウンロードしグラフの作成方法の一例を紹介しています。Chart.jsのバージョンは2023年8月の4.4.0を対象としています。目次Chart.jsでグラフ表示するChart.jsライブラリをURL指定で使用するChart.jsのライブラリをダウンロードして使用するライブラリの使い方Chart.jsでLINEグラフデータを表示するグラフデータとオプションの設定2軸グラフを表示する凡例の表示やグリッド線を変更するソースコード全体まとめ:Chart.jsは簡単に使えて便利なライブラリChart.jsでグラフ表示する上のグラフはChart.jsを使用して表示しています。ページを読み込んだ際にランダム値がセットされグラフ値として表示しています。ダウンロードの方法からサンプルチャートを表示するまでを説明します。チャートは数値・データを分かりやすく表現したものであり、グラフはチャートにおいてX軸とY軸をもつものと区別する場合もありますが、同じものと考えて良いとでしょう。本記事ではLINEグラフを表示することを目的としているため以下ではグラフと表現します。Chart.jsライブラリをURL指定で使用するChart.jsはライブラリをダウンロードしなくてもURLがcdnjsにライブラリにリンクするURLが公開されているため対象のバージョンのライブラリが保管されているURLを指定すると使用できます。"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>cdnjsで対象のバージョンをリンクをコピーしてHTMLでライブラリのURLを指定すると使用できるようになります。「書けるが先で、理解が後」を体験しよう!Chart.jsのライブラリをダウンロードして使用するURLで指定する方法はブラウザーがインターネット接続されている場合のみ使用できますがローカルで使用する場合はライブラリをダウンロードして使用します。GitHub-ChartjsダウンロードGitHub-chart.jsのダウンロードGitHubで公開されているchart.jsのバージョン4.4.0をダウンロードしてします。ライブラリは「chart.js-4.4.0.tgz」にパッケージとして提供されています。ダウンロードして任意の場所に解凍します。Win11ではすべてを展開を選択すると解凍できます。tgz形式で圧縮されているため解凍用のソフトが必要になる場合があります。tgzファイルが解凍できない場合はLhaplusなどのフリーソフトを使用すると解凍できます。窓の杜やVectorでフリーで公開されています。Chart.jsのライブラリtgzファイルを解凍するとpackageファイルが生成されます。例ではWorkSpaceフォルダ内にChartjs4.4.0フォルダを作り内部に解凍したpackageファイルを収納しています。Chart.jsのライブラリファイルはdistフォルダ内にあります。HTMLでscriptとして指定するのは「chart.js」または「chart.umd.js」になりますがどちらも同じ動作になります。umdはファイルのサイズを小さくするためにchart.jsのコードの改行コードなどを削減したものです。旧バージョンの3.X.Xではchart.min.jsでしたが名称が変更されています。ライブラリの容量を削減できるメリットがありますがコードの可読性が低くなってしまいます。ライブラリを編集しないのであればどちらを使用しても問題ありません。本記事ではchart.umd.jsを使用します。ライブラリの使い方HTMLにChart.umd.jsを組み込む方法を説明します。任意のフォルダ内にHTMLファイルを作成してグラフ表示用のキャンパスを準備するまでの手順を説明します。HTMLファイルの作成とライブラリの配置chart-sampleフォルダを任意の場所に作成しHTMLファイルを準備します。テキストファイルなどを準備して拡張子をhtml指定するとHTMLファイルになります。同じフォルダ内にchart.umd.jsファイルを配置します。HTML内でライブラリをURLで指定する場合はchart.umd.jsを配置する必要はありません。src>でchart.umd.jsを指定して読み込んでいます。同じフォルダ内に配置しているためそのままファイル名で読み込みができます。<body>内でグラフを表示するキャンバスを準備します。idをChartIDとしています。グラフのデータを生成する際にID名を指定してグラフデータを生成します。<script>内でグラフデータを設定するとグラフが表示されます。スポンサーリンクChart.jsでLINEグラフデータを表示するHTML内に実装したキャンバス内にLINEグラフを表示するためグラフデータのインスタンスを生成し各種関数の設定を行います。このグラフは以下のソースコードによって表示しています。グラフ表示するための最低限の設定を記述しています。}});document.getElementById(‘ChartID’)で表示するキャンバスを指定しctxにセットします。mychartをグラフデータのインスタンスを生成します。Chart()の第1引数にキャンバスとリンクしたctxを指定します。第2引数にグラフの表示やデータの構造体を指定します。グラフデータの構造体はグラフの種類とグラフデータおよびオプションの設定します。グラフの種類は’LINE’や’BAR’等グラフの形態を設定します。グラフデータではlabels:でX軸の値をセット、data:でY軸の値をセットします。label:はx軸に対してY軸にデータをプロットしたときの凡例の名称となります。オプションの設定はグラフをレスポンシブ表示する設定やX軸及びY軸のメモリの設定などを行います。軸にタイトルを追加する場合やメモリ表示の範囲を指定する設定ができます。広告グラフデータとオプションの設定グラフデータの設定とオプションの設定を行います。グラフの各種設定項目は以下のリンクに詳細があります。各種様々な設定ができますがタイトルの表示、グラフの色など表示、軸の設定を中心に説明します。//軸のスケールを選択}]線の種類を指定しない場合はサンプルのように灰色の線となります。線の種類の設定について説明します。私が良く使用するものを中心に説明します。色の指定はデフォルトで定義されているredやblueなどで指定できますが、rgba()方式による色の指定もできます。存在しない色の場合は黒色になります。fillをtrueにしたときにプロットした点より下を塗りつぶす色を指定します。色の指定はborderColorの例と同じです。プロットした点より下を塗りつぶす場合はtrueを指定する。塗りつぶさない場合はfalseを指定する。値を大きくするほど太い線になります。プロットした点の大きさを指定します。値を大きくするほど大きな点になります。プロットした点にカーソルを合わせた時に表示するサイズを指定します。大きくするほどプロット点を強調することができるが線が太くなりすぎるとpointStyleで指定したプロット表示がつぶれて見えます。プロットした点の表示記号を指定します。デフォルトは●になります。プロットした線間の結びの緊張状態を指定します。0であれば直線となります。大きな値を指定するほど緩やかな線間の表示になりますが見た目が悪くなることがあるため調整が必要です。プロット数が多い場合は使用しない方が良いでしょう。y軸のスケールを指定する。optionsで指定したy軸を指定する。線に関する関数の説明オプションの設定について説明します。オプションの設定は軸の設定やタイトルの設定などを行います。}}オプションの設定を行わない場合はタイトルなどは表示されません。グラフ表示の値は自動で調整されます。レスポンシブ表示する場合はtrueを指定します。初期設定はfalseです。グラフのタイトルをつける際に使用します。plugins内でタイトルを表示するためにdesplayをtrueにします。tilte関数を使用しtextにグラフ名を入力します。フォントサイズを変更する場合はfont関数内でsizeを指定します。x軸とy軸の設定を行います。各項目の表示の指定を行います。trueを指定すると表示します。x軸やy軸の先頭でdesplay設定をfalseにすると全体で表示しない設定になります。軸の最小値と最大値を指定します。指定しない場合は値に応じて自動で軸の範囲が指定されます。軸の目盛りの表示や軸の色の設定を行います。ticks内でcolorで’red’など色を指定すると軸の項目の色が変更できます。title内でdisplayをtrueにすると軸のタイトルが表示できます。textで軸のタイトルを指定します。colorで表示色を指定できfont関数でサイズを指定できます。オプションの設定の説明その他にはアニメーションを停止して動作を軽くしたりする関数などがありますが使用する頻度は少ないため割愛しています。スポンサーリンク2軸グラフを表示するChart.jsは1軸だけでなく2軸のグラフなど複数軸の表示ができます。2軸のグラフ表示はdetasets関数において2つのデータの配列を生成することで実現できます。//軸のスケールを選択}]2つ目の要素も1つ目のサンプルと同様に配列内にグラフのデータを設定します。y軸のスケールの設定関数であるyAxisIDを’y2’にすることで別のスケールでのグラフ表示ができます。y2スケールはオプションの設定で追加します。//y2軸のタイトルを入れる場合--end--}y2軸のスケールをy軸のスケールの下に追加します。設定する内容はy軸とほとんど同じですが見た目で区別できるように軸の色を青色にしています。y2軸をグラフの右側に表示するためposition関数で’right’を指定します。凡例の表示やグリッド線を変更する凡例の文字は初期では灰色と見にくいことがあります。凡例の位置と文字色の変更はoptionの共通部分で変更します。},optionsブロパティ内のpluginsブロパティを参照します。legendブロパティ内のposition:で凡例の位置を指定します。例ではright(右)を指定していますが、left(左)、top(上:デフォルト)、bottom(下)を指定することができます。文字色の変更はlabelsプロパティ内のcolor:で行います。例ではwhite(白)を指定していますが、red(赤)、yellow(黄)などの指定ができます。グラフの軸は直線でグラフ内部のグリッドを点線で表示する方法を説明します。},},optionプロパティ内のscalesブロパティを参照します。gridプロパティ内のcolor:でグリッドの色を指定します。例ではgray(灰)を指定しています。borderDash:は点線を描写する指定です。[長さ,間隔]のように指定します。例では[2,2]にしていますが、2px線を引き2px間隔をあける指定になります。borderWidthは軸の線の太さになります。例では1にしていますが大きくすると線が太くなります。tickColor:は軸から外側に向けての線の色を指定します。borderColor:は軸の色を指定します。例では指定項目が分かりやすいようにtickColor:とborderColor:の色を異色にしていますがグラフの見やすさからすると同色にすることをお勧めします。以下のソースコードはコンパイルして動作確認をしております。コメントなど細かな部分で間違っていたりやライブラリの更新などにより動作しなくなったりする可能性があります。参考としてお使いいただければと思います。Chromeなどのブラウザで表示してみてください。</script></body></html>まとめ:Chart.jsは簡単に使えて便利なライブラリchart.jsを使うとエクセルでグラフを作成するようにブラウザー上に簡単にグラフを表示することができます。オープンソースであり誰でも簡単に使用できるのが魅力的です。ライブラリの使い方はダウンロードする方法とURLを指定する方法の2通りがあります。ライブラリを組み込み関数に値を指定することでグラフが表示ができ2軸のグラフ表示も可能です。線グラフのみでなく棒グラフや円グラフにも対応しており様々データを用途に応じてきれいに表示することができます。PR:無料トライアル実施中【PC専用】AIスライド資料作成ツールの利用:イルシル最後まで、読んでいただきありがとうございました。SPOTはTWELITEとESP32-WROOM-32Eを組み合わせた無線LANモジュールです。子機を出荷時のアプリと同様の設定に合わせることでWiFiを使ってブラウザーに子機から取得したデータを表示させることができます。2022)でイーサーネット通信を行う準備として自局(自分のパソコン)のIPアドレスを取得する方法の例として、ネットワークインターフェース及びDNSクラスから取得する方法をまとめました。電気電子部門の試験において発電設備に関する計算問題が出題されています。水力発電の水頭に関するベルヌーイの定理(公式)が分かっていれば難しくありません。ガスタービンの効率も排熱と回収の関係を正確につかめれば難しくありません。組み込みエンジニアPICマイコン(PIC12F675)のEEPROMの使い方の応用PIC12F675のEEPROMは読み書きに数msの時間が必要です。ウェイトで待つ方法もありますが、プログラムの規模が大きくなるほどウェイトを持たせると不都合が発生します。ウェイトせずにモード遷移の方法で管理する方法を説明しています。XIAO31ESP32-WROOM-32E37TWELITE(トワイライト)26PIC16F182731PIC12F67522ノウハウ(体験談)36趣味と生活29その他6タグオペアンププロフィールENGかぴ当ブログの運営者のENGカピです。組み込みエンジニアとして10年以上の経験を活かしてセンサーモジュール等の動作確認したことをまとめています。広告、アフィリエイト収益で当ブログを運営させていただいております。defined.")}))})()タイトルとURLをコピーしました。