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

プログラミング
この記事は約5分で読めます。
スポンサーリンク

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

Chart.jsとは

Chart.js | Open source HTML5 Charts for your website
Simple, clean and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free.

多種多様なグラフを描写できる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をコピーしました