FrontEnd

今さらChart.jsでグラフ描画

投稿日:

はじめに

JSのチャートライブラリは色々ありますが、よく聞くものでChart.jsがあります。
今回はこのライブラリを使って、グラフ描画する時に一番使いそうな、折れ線グラフ、棒グラフ、円グラフを描画してみたいと思います。

準備

npmでインストールする事可能ですが、

今回はお試しという事でCDNを利用します。

折れ線グラフと棒グラフ

コード全体

html

グラフ描画用に canvasタグ を用意します。 type で、グラフの種類を変更出来ます。

JS

上記のcanvasのDOMに対して、グラフ描画しています。引数で必要な値を渡します。

dataの記述です。ここでグラフの値やグラフのUIを設定しています。

optionsの記述です。Y軸やタイトルなど、メインとなるグラフ以外部分の設定をしています。

描画するとこんな感じになります。

円グラフ

データ少し変更して、円グラフを描画してみます。

html

グラフ描画用に canvasタグ を用意します。

JS

type: 'pie' を設定しています。

dataの記述です。今回は分かりやすく、データ数値の合計が100になるように設定しておきます。

optionsの記述です。

描画してみると、こんな感じになります。

さいごに

Chart.jsを利用すると、非常に簡単にグラフ描画する事が出来ます。
グラフにしたいデータをサーバーサイドで準備すれば、そのまま実装出来そうです。

おすすめ書籍

独習JavaScript 新版 確かな力が身につくJavaScript「超」入門 第2版

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

react-icon

MUI Themeでカラー、シャドウ、フォントなどを設定する

1 はじめに2 Themeとは3 Themeのセットアップ4 Themeの設定方法4.1 Palette4.1.1 colorオブジェクト4.1.2 直接色を指定する4.2 Elevationのシャド ...

react-icon

Vite 3を使ってみた

1 はじめに2 なぜViteは早いのか2.1 Native ESMの活用2.2 esbuildによる事前バンドル3 Viteのセットアップ3.1 Reactテンプレートでのセットアップ3.2 vite ...

Vue.js入門その8〜vue-draggableを使ってドラッグ機能の実装〜

1 はじめに2 準備3 一列の並び替え3.1 移動する前、移動した後3.1.1 move3.1.2 end4 2列間の移動4.1 片方を空配列にすると。。。5 さいごに6 おすすめ書籍 はじめに 久し ...

フォロー

blog-page_side_responsive

2022年6月
 1234
567891011
12131415161718
19202122232425
2627282930  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。