‘Chart.js’ タグのついている投稿

【JavaScript】Chart.jsを活用してグラフを描画する(応用)

2024 年 9 月 29 日 日曜日 by sumitanik

前回の記事では、Chart.jsの基本的な部分(基本要素、構造、実装例)を紹介しました。
ここでは、前回実装したグラフをカスタマイズして、さらに細かな設定を行う方法について紹介します。
※以下の実装例では、変更点のみを記載しています。

棒グラフの縦軸と横軸を入れ替える

軸を入れ替えるためには、以下の2つの処理を行います。

①optionsにindexAxisを追加します。

options: {
    indexAxis: 'y'
}

②scalesのxとy内の設定を全て入れ替えます。

(さらに…)

【JavaScript】Chart.jsを活用してグラフを描画する(基礎)

2024 年 9 月 29 日 日曜日 by sumitanik

Chart.jsとは

Chart.js とは、データを視覚化するためのオープンソースのJavaScriptライブラリです。

以下のような特徴があります。
1. 折れ線グラフ、棒グラフ、円グラフなどの様々なスタイルをサポート。
2. 使いやすいインターフェースで、数行のコードでチャートを作成することが可能。
3. 色やフォント、サイズなどをカスタマイズでき、独自のデザインに合わせることが可能。
4. アニメーション効果を追加したり、ユーザーの操作に応じて動的にデータを表示することが可能。

Chart.jsの基本的な設定方法については、以下の公式サイトを参照してください。
https://www.chartjs.org/docs/latest/

ここでは、Chart.jsの基本要素、構造と簡単な実装例を紹介します。
※今回の実装例は、Chart.jsバージョン4.4.3に基づいています。

(さらに…)