グラフを表示するChart.jsでよく使用するoptions

カテゴリー:JavaScript

Chart.jsはJavaScriptでグラフを表示することができるライブラリです。以前のWordPressに読み込んで使用する方法を記載しましたが、今回はその中でもよく使用するoptionsを「type: ‘bar’」と「type:’radar’」の例でまとめていきたいと思います。

使用するChart.jsのバージョンは2.7.1です。

・前回の投稿

WordPressでChart.jsを使用して綺麗なグラフを表示しよう

今回の投稿は、WordPressで投稿にグラフを表示する方法を備忘記録として投稿します。JavaScriptライブラリとして、Chart.jsを使用してグラフを表示していこうと思います。Chart.j...

レスポンシブ

先ずはレスポンシブを指定します。

・レスポンシブ
options: {
    responsive: true
  }

上記で、レスポンシブの設定になります。

最小値と最大値

次に最小値と最大値を指定します。

・「type:’radar’」レーダーチャートの場合
options: {
    responsive: true,
      scale: {
        ticks: {
          max: 1000,
          min: 0
        }
      }
    }
・「type: ‘bar’」棒グラフの場合
options: {
   responsive: true,
      scales: {
        yAxes: [{
         ticks: {
           max: 1000,
           min: 0
         }
       }]
     }
   }

ここまでで、レスポンシブでグラフの最小値が0最大値が1000で表示されるようになります。レーダーチャートと棒グラフでは、optionsの設定方法が異なるので注意が必要です。

他にもグラフの値のオプションとして、「beginAtZero: true」を追加すれば0からの表示にすることができます。

凡例の表示位置

グラフの凡例の表示位置を指定します。

legend: {
    position: 'bottom'
  }

これでグラフの凡例がグラフの下に表示されるようにようになります。初期値は‘top’です。

凡例の非表示

グラフの凡例を非表示に指定します。

legend: {
    display: false
  }

これでグラフの凡例が非表示になります。初期値はtrueです。

紹介したoptions(display: falseを除く)を設定したレーダーチャートと棒グラフが下記になります。その他にも色々設定がありますが、細い設定も可能なChart.jsは便利ですね。


タグ

関連する投稿

ドラクエ好きな社会保険労務士有資格者・ファイナンシャルプランナー技能士検定2級正会員が運営をしています。当ブログではDQMSLを中心にWordPress・HTML・CSS・JS・PHPなどのTips備忘記録や資格関連の情報、その他雑記を発信して行きます。