Vue.jsでChart.jsを使ってグラフを描写する

プログラミング
この記事は約5分で読めます。

今回はVue.jsで「Chart.jsを使ってグラフを書こうぜ」という話です。

Chart.jsとは

Chart.js
Simple yet flexible JavaScript charting library for the modern web

多種多様なグラフを描写できるMISライセンスのOSSです。

今回はこのChart.jsをVue用に改良されたvue-chartjsを使用していきます。

vue-chartjsをインストールする

📈 vue-chartjs
⚡ Easy and beautiful charts with Chart.js and Vue.js

こちらを参考に進めていきます。

vue-chartjsをインストール

npmを使って開発することが多いので今回はnpmでインストールを行います。

npm install vue-chartjs chart.js --save

yarnでもインストールが出来るようなので詳しくは↑のリンクからお願いします。

グラフを作成する

グラフエリアを作成する

まずはグラフを書くための場所、グラフエリアを作成します。

最低限必要なベースはこれでOKです。

bar-chart.jsをVueファイル側でimportした上でcomponentとして読み込ませて表示させます。

何もないグラフエリアが表示されたと思います。

[11月10日追記] Componentの命名のの仕方はケバブケースとパスカルケースで挙動が変わるようです。今回はどちらでも動きますが、厳密に分けたほうが良いです。

コンポーネントの登録 — Vue.js
Vue.js - The Progressive JavaScript Framework

次の章ではデータを読み込ませていきます!

グラフエリアにデータを入れる

データを入れる方法には、先程のコードのbar-chart.jsで

this.renderChart(data, options)

のdataに必要なデータを入れるだけです。

データが入れば方法は何でも良いので、bar-chart.jsに書いても、graph-view.vueに書いてもOKですが、今回はgraph-view.vueにデータを書いて、propsを使って渡す方法で行います。

bar-chart.jsは props に chartData と options を設定して外部からデータを受け付けるようにしています。

graph-view.vueでは data で chartData を定義してその中に labels や datasets が作られています。

この datasets がデータのコアになるものです。

datasetsは配列になっており、複数のグラフ情報をまとめることができます。

なおグラフ描写に関するデータはjson形式で書かれています。

シングルファイルコンポーネントの場合

Vueで実装を行う場合、シングルファイルコンポーネントで実装を行うことがあります。

具体的には先程 「bar-chart.js というファイルをVueファイルでインポートして」と言いましたが、.vueファイルで統一する場合もあります。

その場合は<template>タグを付けないようにしてください。

Template タグはマージできません
.vueファイルに<template>タグを含めないでください。 Vueはテンプレートをマージすることはできません.vueファイルに空の <template>タグを追加すると、Vueは拡張されたものからではなく.vueのコンポーネントからテンプレートを取得します。その結果、空のテンプレートとエラーが発生します。

https://vue-chartjs.org/ja/guide//#vue-シングルファイルコンポーネント

分かりにくいですが、Vueのファイルを作る場合、<template>が入っている場合、挙動が変わります。

vue-chartjsでは拡張されたものとして読み込ませたいため<template>タグを作らない.vueファイルを作ってください。

Vue インスタンス — Vue.js
Vue.js - The Progressive JavaScript Framework

グラフを編集する

グラフは出来ましたが、気になることがあります。

Februaryのグラフが消えています!

よく見ると最小値が20になっているためグラフが表示されていないようです。

またグラフエリアも正方形のままで使い勝手が悪そうです。

ここでは先程作ったグラフを編集を行います。

optionsを設定する

chartDataと同じようにoptionsもvueのdataの中に定義していきます。

すると以下のような表示になります。

Februaryのグラフが表示されました。

また、全体的に横長になり、凡例に”点”が付きました。

点数の区切りも10点ずつになっていますね。

このようにoptionsを設定すると細かな設定を行うことが可能です。

optionsの設定はかなり多くあるので各自調べてほしいです。

まとめ

今回はChart.jsのVue向けパッケージのvue-chartjsを使ったグラフの描写を行いました。

  • this.renderChart(data, options) でグラフエリアを作成
  • dataにdatasetsが入った形式のjson形式のデータを入れるとグラフが描写される
  • optionsでグラフのデザインやアスペクト比を変えることができる

まずはここだけを抑えてもらえればと思います。

まだまだ使いこなせていませんが、これから開発を行いながら少しずつ使い方をマスターしていこうと思います。

ここまで読んで頂きありがとうございました!

コメント

タイトルとURLをコピーしました