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


関連記事

Vue on Rails で作ったアプリを振り返ってみる

1 はじめに2 全体的なこと2.1 ディレクトリ構成2.2 CSSフレームワーク2.3 Capistranoでのデプロイ3 axiosのラッパー4 Vuex4.1 ログインの状態管理5 Router6 ...

正式版Vue.js 3.0のTeleportを触ってみる

1 はじめに1.1 Vue.js 3.0のプロジェクト作成方法1.2 Teleportとは2 基本形2.1 コード2.2 画面3 別のコンポーネントの入れ子にする場合3.1 コード3.2 画面4 同じ ...

tailwindcss

Tailwind CSSの基礎とVue.jsへの導入

1 はじめに2 Tailwind CSSとは2.1 utility class3 Bootstrapとの比較3.1 柔軟性3.2 コード量3.3 学習コスト3.4 ファイルサイズ3.5 その他4 なぜ ...

react-icon

react-intl (Format.js) を使ってi18n対応

1 はじめに2 react-intlとは?3 react-intlの導入4 使い方4.1 IntlProviderの実装4.2 メッセージ定義4.3 <Foramatted*>コンポーネン ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

フォロー

blog-page_side_responsive

2022年6月
 1234
567891011
12131415161718
19202122232425
2627282930  

アプリ情報

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