vueとchartjsについて調べてみた

仕事で触る機会があったのでどんなことができるか調べてみました

まず概要
・vue.js
フロントエンドのフレームワーク。
React.jsとよく比較される。Reactに比べてクセが少ないのでとっつきやすい。
・vue-chartjs
グラフ描画系で有名なchart.jsのvueで使いやすくなってる版。グラフを任意のタイミングで再描画したい時とかに便利。

まずはシンプルにグラフコンポーネントを作って描画。
このコードを例えばLineChart.vueとかっていう名前のコンポーネントにしといて親から呼び出す。

もちろん棒グラフ、円グラフ、折れ線グラフなどchartjsで描ける図はvuechartjsでも描ける。
propsに描画したいデータとコンフィグを渡して描画できる。スタイリッシュでわかりやすい。
またデフォルトで図の上に凡例が表示される。これをクリックすると表示したり非表示にしたりできる。

調べるとこいつのデザインもカスタムできるらしいので試す。

全グラフを表示

<!-- 各グラフの表示チェックボックス -->
<div v-for="(dataset, index) in datasets" :key="index">
  <label>
    <input
      type="checkbox"
      v-model="visible[index]"
      @change="updateChart"
    />
    グラフ{{ index + 1 }}
  </label>
</div>

<!-- グラフ本体 -->
<Line :data="chartData" :options="chartOptions" />

最初の行で全選択、次の行で選択したグラフだけ表示できるようにした。
何でエレガント。