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


関連記事

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくる

1 はじめに1.1 環境2 mark.js2.1 公式ドキュメント2.2 インストール2.3 実際に使用してみる2.4 オプションについて3 プレビュー機能3.1 vue.jsに関して3.2 JQue ...

svelte

SvelteのStore入門

1 はじめに2 SvelteにおけるStoreの概要2.1 Storeの条件2.2 Storeの種類3 Storeの実装と使い方3.1 Writable Store3.1.1 実装例3.1.2 使用例 ...

js

TypeScriptでJavaScriptのライブラリを使用するには?

1 はじめに2 対応方法2.1 npmで@typesからインストールする2.2 自分で型定義ファイルを作る3 Declaration Space3.1 Type Declaration Space3. ...

react-icon

React Konvaで状態管理されたCanvasを描画してみた

1 はじめに2 Canvasとは?3 React Konvaとは4 着せ替えアプリっぽいサンプルを作成4.1 React Konvaの導入4.2 画像の描画4.3 stateによるCanvas描画4. ...

フォロー

blog-page_side_responsive

2022年6月
 1234
567891011
12131415161718
19202122232425
2627282930  

アプリ情報

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