【Chart.js 3.7】データを編集してグラフを更新する方法

よく見るグラフを実際に作ってみた←こちらでグラフのサンプルをいくつか作成しました。

そのグラフの数値を修正する方法について簡単に説明します。

スポンサーリンク

グラフを修正する方法

「よく見るグラフを実際に作ってみた」の棒グラフの例2は僕が適当に作ったデータのグラフですので、こちらを例にグラフの修正方法を見ていきます。

表とグラフ

まずは、表とグラフを見た方がイメージしやすいかと思いますので、載せておきます。

修正箇所

では、修正に関してみていきます。

変更内容

まずは、どのように数値を変更するか表に書き加えます。修正理由は「1年経ち、2017年を削除して、2022年を追加する」をイメージしました。企業などでは実際にある更新内容だと思います。

ようやく本題です。

まずは、修正前のソースです。グラフを作るために他にも書いているのすが、グラフを修正するのは、下記太字の数値のみでOKです。一部抜粋しています。
（※最後にソース一式も載せておきます）

const bar_labels2 = [
  '2017年3月期',
  '2018年3月期',
  '2019年3月期',
  '2020年3月期',
  '2021年3月期',
];
const bar_data2 = {
  labels: bar_labels2,
  datasets: [
    {
      label: '売上高（百万）',
      backgroundColor: CHART_COLORS.blue,
      data: [2222, 2434, 2625, 2524, 2652],
    },
    {
      label: '経常利益（百万）',
      backgroundColor: CHART_COLORS.orange,
      data: [472, 680, 588, 375, 477],
    },
  ],
};

↓先ほどの表に従って太字の数値部分を変更します。

const bar_labels2 = [
  '2018年3月期',
  '2019年3月期',
  '2020年3月期',
  '2021年3月期',
  '2022年3月期', 
];
const bar_data2 = {
  labels: bar_labels2,
  datasets: [
    {
      label: '売上高（百万）',
      backgroundColor: CHART_COLORS.blue,
      data: [2434, 2625, 2524, 2652, 2853],
    },
    {
      label: '経常利益（百万）',
      backgroundColor: CHART_COLORS.orange,
      data: [680, 588, 375, 477, 620],
    },
  ],
};

変更後のグラフ

比較しやすいように、下記に変更前のグラフを掲載します。見た目はそこまで変化はありませんが、グラフの数値と棒の高さが変わっています。

WordPressの管理画面で数値を変更

WordPressのカスタムフィールドという機能を使って、Wordpressの管理画面からグラフに必要なデータを設定できるようにすることも可能です。

仕事で対応する場合は「Advanced Custom Fields」というプラグインを使用します。このプラグインは7割以上のご依頼で使用しますので、自分で簡単に修正したいという需要は高いのかなと思います。

まとめ

最後に少し話が逸れてしまいましたが、グラフの数値を更新することは意外と簡単です。

基本となるグラフを作成したり、作ってもらったりすれば、それ以降の更新は何度かやれば容易にできるようになります。

それでは、最後までお読みいただきありがとうございました！

スポンサーリンク