現代のWebサイトとWebアプリにおいてチャートは重要な位置を占めています。チャートは、文字だけでは表せない情報を表現して、理解しづらいデータの意味を分かりやすく表現します。
Chart.jsとVue.jsを用いて、さまざまな型のチャートでデータを表現する方法を解説します。
Chart.jsはシンプルで柔軟性に富んだ開発者、デザイナー向けのJavaScriptのチャート作成ライブラリーです。HTML5のcanvas要素でいろいろな種類のチャートが描けます。Chart.jsを復習するならこちらがオススメです。
Vue.jsはプログレッシブなJavaScriptフレームワークです。ここではChart.jsと一緒にチャートを作成します。Vue.js入門記事はこちらがおすすめです。
今回作るデモ用Vue.jsプロジェクト構築はvue-cliを使用します。vue-cliは、Vue.jsプロジェクト専用の簡潔なCLI（コマンドラインツール）です。アプリ製作の出発点として数多くのテンプレートが用意されています。ここではwebpackテンプレートでアプリを立ち上げます。
チャート作成ツールを選ぶ
JavaScriptのチャート作成ライブラリーはいろいろな種類が存在します。その中にVue.js用のラッパーも複数ありますが、この記事ではVue用Chart.jsラッパーを扱います。
Vue用ラッパーがGitHubリポジトリawesome-vueに掲載されています。ここでは以下のChart.jsラッパーを使用します。
いろいろなラッパーで異なる型のチャートを作成し、それぞれの優れた機能も触れます。
vue-cliでプロジェクトを構築
以下のコマンドでvue-cliをインストールします。
npm install -g vue-cli完了したら、以下のコマンドでプロジェクトを構築します。
vue init webpack my-projectwebpackテンプレートを使ったVue.jsアプリ「my-project」を生成すると指定しました。表示される質問に答えるだけで、あとの処理はvue-cliが実行します。
次に、アプリに必要な依存オブジェクトとChart.jsラッパーをインストールします。
npm install chart.js chartkick hchs-vue-charts vue-chartjs vue-chartkickヒント：npm5を使っているなら、--saveフラグは不要です。すべてのパッケージは自動的に保存されます。詳しくはこちらを確認ください。
必要な依存オブジェクトとVue用Chart.jsラッパーがインストールできました。npm run devコマンドで、アプリ作成にあたり最良の開発者エクスペリエンスが得られるとvue-cliのドキュメントにあります。アプリを実行しテストします。
npm run devlocalhost:8080を開くと、ブラウザーにウェルカムページが表示されます。
ルートの追加
各ラッパーごとにチャートを表示するため、それぞれのルートを用意します。vue-chartsで作るチャートは/chartsルート、vue-chartjs用は/chartjs、vue-chartkick用は/chartkickを用意します。
アプリのルートフォルダーに移動し、index.jsファイルを開きます。ファイルの中身を置き換えます。
import Vue from 'vue' // Import Vue from node_modules
import Router from 'vue-router' // Import Vue Router from node_modules
import Home from '@/components/Home' //The Home component that's in charge of everything we see on the app's homepage
import VueChartJS from '@/components/VueChartJS' //The VueChartJS component that displays the vue-chartjs charts.
import VueChartKick from '@/components/VueChartKick' //The VueChartJS component that displays the vue-chartkick charts.
import VueCharts from '@/components/VueCharts' //The VueChartJS component that displays the vue-charts charts.
//Specify that we want to use Vue Router
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/chartjs',
name: 'VueChartJS',
component: VueChartJS
},
{
path: '/chartkick',
name: 'VueChartKick',
component: VueChartKick
},
{
path: '/charts',
name: 'VueCharts',
component: VueCharts
}
]
})上記コードについて触れる前に、src/components/フォルダーに以下のファイルが用意されていることを確認します。上記で定義したルートごと、それぞれのコンポーネントがあります。
- VueChartJS.vue
- VueChartKick.vue
- VueCharts.vue
上記コードブロックでなにが起きているのでしょう？
ここで作成したいくつかのVueコンポーネントファイルを読み込みました。コンポーネントはVueの特徴の1つです。基本的なHTML要素を拡張して再利用可能なコードを埋め込むめます。高位から見ればVueコンポーネントとは、Vueコンパイラがビヘイビアに加えるカスタム要素です。
最後に、チャートを表示するそれぞれのページに適用するルートとコンポーネントを定義しています。
ホームコンポーネント
ホームコンポーネントはデフォルトルート（/）用に作成する必要があります。既存のHello.vueファイルの名称をHome.vueに変更して中身を以下のコードブロックに置き換えても結構です。
<template>
<section class="hero is-success is-fullheight">
<div class="hero-body">
<div class="container">
<h1>Creating Beautiful Charts Using Vue.js Wrappers For Chart.js</h1>
<ul>
<li><router-link to="/chartjs">vue-chartjs</router-link></li>
<li><router-link to="/charts">vue-charts</router-link></li>
<li><router-link to="/chartkick">vue-chartkick</router-link></li>
</ul>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'home'
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
text-decoration: underline;
}
</style>Bulmaの追加
チャートを作る前にもう1つ必要な作業があります。アプリにBulma CSSフレームワークを追加します。CSSが楽になります。
アプリのルートフォルダーにあるindex.htmlを開き、以下の文をheadタグ内に追加します。
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css" rel="stylesheet">vue-chartjsでチャートを作る
vue-chartjsは、再利用可能なチャートコンポーネントが簡単に作れるChart.jsラッパーです。再利用可能とは、基本チャートクラスを読み込んで拡張し、カスタムコンポーネントを作れるということです。
今回は、vue-chartjsで作る、折れ線グラフ、棒グラフ、バブルチャート（散布図の一種）、さらにリアクティビティ（Reactivity、反応性）のデモとしてデータ変更時に自動更新して反映できる棒グラフを解説します。
src/components/フォルダーに以下のファイルが用意されていることを確認してください。
- LineChart.vue
- BarChart.vue
- BubbleChart.vue
- Reactive.vue
折れ線グラフ
折れ線グラフを作るには、チャート描画専用のコンポーネントを作成します。src/components/フォルダー内のLineChart.vueコンポーネントのファイルを開き、以下のコードを入力します。
<script>
//Importing Line class from the vue-chartjs wrapper
import {Line} from 'vue-chartjs'
//Exporting this so it can be used in other components
export default Line.extend({
data () {
return {
datacollection: {
//Data to be represented on x-axis
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
pointBackgroundColor: 'white',
borderWidth: 1,
pointBorderColor: '#249EBF',
//Data to be represented on y-axis
data: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100]
}
]
},
//Chart.js options that controls the appearance of the chart
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true
}
}],
xAxes: [ {
gridLines: {
display: false
}
}]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted () {
//renderChart function renders the chart with the datacollection and options object.
this.renderChart(this.datacollection, this.options)
}
})
</script>上記のコードを解説します。まず、必要なチャートクラス（ここではLine）をvue-chartjsから読み込みエクスポートします。
dataプロパティに、折れ線グラフを作るのに必要な情報を持つdatacollectionオブジェクトが含まれています。datacollectionオブジェクトにはX軸を表すlabels、Y軸を表すdatasets、チャート外観を調整するoptionsオブジェクトなどのChart.jsの設定も含まれます。
mounted関数はrenderChart()をコールします。パラメータとして渡されたdatacollectionとoptionsオブジェクトを基にしてグラフを描画します。
VueChartJS.vueファイルを開いて、以下のコードを入力します。
<template>
<section class="container">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/chartjs">vue-chartjs</router-link></li>
<li><router-link to="/charts">vue-charts</router-link></li>
<li><router-link to="/chartkick">vue-chartkick</router-link></li>
</ul>
<h1>Demo examples of vue-chartjs</h1>
<div class="columns">
<div class="column">
<h3>Line Chart</h3>
<line-chart></line-chart>
</div>
<div class="column">
<h3>Bar Chart</h3>
<!--Bar Chart example-->
</div>
</div>
<div class="columns">
<div class="column">
<h3>Bubble Chart</h3>
<!--Bubble Chart example-->
</div>
<div class="column">
<h3>Reactivity - Live update upon change in datasets</h3>
<!--Reactivity Line Chart example-->
</div>
</div>
</section>
</template>
<script>
import LineChart from '@/components/LineChart'
import BarChart from '@/components/BarChart'
import BubbleChart from '@/components/BubbleChart'
import Reactive from '@/components/Reactive'
export default {
name: 'VueChartJS',
components: {
LineChart,
BarChart,
BubbleChart,
Reactive
}
}
</script>
<style scoped>
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>VueChartJS.vueファイルに含まれるtemplateタグ内にはHTMLが、scriptタグ内にはJavaScriptが、styleタグ内にはCSSが収まります。
templateタグ内に、アプリ内の別ページへのリンクを貼ったメニューを表示するコードを書き、Bulmaのcolumnsクラスで、2つの列と2つの行を持つページレイアウトを作成しました。さらに、scriptタグ内のline-chartコンポーネントを追加しました。
scriptタグ内で先程作った.vueファイルをインポートし、componentsオブジェクト内で参照します。これでHTMLの中からこれらline-chart、bar-chart、bubble-chart、reactiveが使えます。
ここでnpm run devを実行して/chartjsへ移動します。折れ線グラフがページ上に描かれるはずです。
棒グラフ
次は、棒グラフを表示するカスタムコンポーネントです。src/componentsフォルダー内のBarChart.vueコンポーネントファイルを開き、以下のコードを入力します。
<script>
//Importing Bar class from the vue-chartjs wrapper
import {Bar} from 'vue-chartjs'
//Exporting this so it can be used in other components
export default Bar.extend({
data () {
return {
datacollection: {
//Data to be represented on x-axis
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
pointBackgroundColor: 'white',
borderWidth: 1,
pointBorderColor: '#249EBF',
//Data to be represented on y-axis
data: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100]
}
]
},
//Chart.js options that controls the appearance of the chart
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true
}
}],
xAxes: [ {
gridLines: {
display: false
}
}]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted () {
//renderChart function renders the chart with the datacollection and options object.
this.renderChart(this.datacollection, this.options)
}
})
</script>上記のコードは先程のLineChart.vueファイルと同じです。唯一の違いは、Lineの代わりにBarクラスをインポート・エクスポートしています。
もう1つ、棒グラフを表示させる前に、VueChartJS.vueファイルを編集します。<!--Bar Chart example-->を<bar-chart></bar-chart>に置き換えます。シンプルに、HTMLテンプレート内で作成したBarコンポーネントを使用します。
バブルチャート
バブルチャートのみを表示するコンポーネントを作ります。
注：バブルチャートとは、X軸、Y軸、半径Rという3つの軸をもとに、大きさの異なる円形／泡型でデータを表すチャートです。xは水平方向の軸、yは垂直方向の軸、rはそれぞれの円（泡＝バブル）の半径を表します。
src/componentsフォルダー内のBubbleChart.vueコンポーネントファイルを開き、以下のコードを入力します。
<script>
//Importing Bubble class from the vue-chartjs wrapper
import {Bubble} from 'vue-chartjs'
//Exporting this so it can be used in other components
export default Bubble.extend({
data () {
return {
datacollection: {
//Data to be represented on x-axis
labels: ['Data'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
pointBackgroundColor: 'white',
borderWidth: 1,
pointBorderColor: '#249EBF',
//Data to be represented on y-axis
data: [
{
x: 100,
y: 0,
r: 10
},
{
x: 60,
y: 30,
r: 20
},
{
x: 40,
y: 60,
r: 25
},
{
x: 80,
y: 80,
r: 50
},
{
x: 20,
y: 30,
r: 25
},
{
x: 0,
y: 100,
r: 5
}
]
}
]
},
//Chart.js options that controls the appearance of the chart
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true
}
}],
xAxes: [ {
gridLines: {
display: false
}
}]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted () {
//renderChart function renders the chart with the datacollection and options object.
this.renderChart(this.datacollection, this.options)
}
})
</script>上記のコードは先程のLineChart.vueやBarChart.vueファイルと同じことをしています。違いは、LineやBarの代わりにBubbleクラスをインポート・エクスポートする点と、datasetsオブジェクトにx、y、zの値が入る点です。
バブルチャートを表示する前に、VueChartJS.vueファイルを編集します。<!--Bubble Chart example-->を<bubble-chart></bubble-chart>に置き換えます。
リアクティブな棒グラフ
最後は、データセットが変更された際に自動的にチャートを更新する方法を解説します。従来のChart.jsにこの機能は無く、vue-chartjsが以下の2つのmixin（サブクラスとして継承されることにより機能を提供するクラス）の力を借りて実現します。
- reactiveProp
- reactiveData
src/componentsフォルダー内のReactive.vueコンポーネントファイルを開き、以下のコードを入力します。
<script>
//Importing Bar and mixins class from the vue-chartjs wrapper
import {Bar, mixins} from 'vue-chartjs'
//Getting the reactiveProp mixin from the mixins module.
const { reactiveProp } = mixins
export default Bar.extend({
mixins: [reactiveProp],
data () {
return {
//Chart.js options that control the appearance of the chart
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true
}
}],
xAxes: [ {
gridLines: {
display: false
}
}]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted () {
// this.chartData is created in the mixin and contains all the data needed to build the chart.
this.renderChart(this.chartData, this.options)
}
})
</script>vue-chartjsからBarおよびmixinクラスを読み込み、Barクラスを拡張します。さらにリアクティブ化に必要なmixinモジュールからreactivePropというmixinを取り出します。
reactivePropはチャートコンポーネントのロジックを拡張して、自動でプロパティchartDataを作り、Vueウォッチャーを追加します。必要なデータはchartDataプロパティに入っているためdatasetオブジェクトは不要です。
VueChartJS.vueファイルをさらに編集します。VueChartJS.vueを開き、コンポーネントメソッドの後ろに以下のコードを入力します。
data () {
return {
// instantiating datacollection with null
datacollection: null
}
},
created () {
//anytime the vue instance is created, call the fillData() function.
this.fillData()
},
methods: {
fillData () {
this.datacollection = {
// Data for the y-axis of the chart
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
// Data for the x-axis of the chart
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
}
]
}
},
getRandomInt () {
// JS function to generate numbers to be used for the chart
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
}
}上記のコードを解説します。dataオブジェクト内では、null値のdatacollectionオブジェクトを返します。createdメソッド内では、コンポーネントのインスタンスが生成されるたびにfillData()が呼ばれます。fillData関数はmethodsオブジェクト内にあります。
methodsオブジェクト内で、関数「fillData」を作りました。label配列（X軸のデータ）およびdatasets配列（Y軸用のdata配列を含んでいる）を持った、datacollectionオブジェクトを生成します。
注：data配列の中身はgetRandomInt関数で、乱数を生成します。
チャートを表示して自動更新されるか確認するため、<!--Reactivity Line Chart example-->を以下の記述に置き換えます。
<reactive :chart-data="datacollection"></reactive>
<button class="button is-primary" @click="fillData()">Randomize</button>reactiveコンポーネントでチャートを表示するため、chart-dataプロパティにdatacollectionの中身を渡します。クリックされるたびにfillData()メソッドを呼ぶボタンも用意します。
アプリの/chartjsルートに移動して新しいチャートの表示を確認したら、Randomize（ランダム化）ボタンをクリックして、チャートがリアルタイムで更新され新しいデータが反映されるか確認します。
vue-chartsでチャートを作成する
vue-chartsは、vue-chartjsとは異なる方法でチャートを生成します。データの処理とチャートの描画に別々のコンポーネントではなく、必要なデータは1つのVueインスタンスに収まります。
data () {
return {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
dataset: [65, 59, 80, 81, 56, 55, 40]
}
}テンプレート内で<chartjs-line></chartjs-line>を使えば折れ線グラフ、<chartjs-bar></chartjs-bar>を使えば棒グラフ、<chartjs-radar></chartjs-radar>を使えばレーダーチャートを表示できます。
vue-chartsをグローバルに登録します。srcフォルダー内のmain.jsファイルを開き、以下のコードを既存のimport文のあとに記述します。
import 'chart.js'
import 'hchs-vue-charts'
Vue.use(window.VueCharts)node_modulesからChart.jsライブラリーとhchs-vue-chartsをインポートし、Vue.use(window.VueCharts)によりグローバルに登録しました。
vue-chartsの使い方を詳しく解説します。先程作ったVueCharts.vueファイルを開き以下のコードを入力します。
<template>
<section class="container">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/chartjs">vue-chartjs</router-link></li>
<li><router-link to="/charts">vue-charts</router-link></li>
<li><router-link to="/chartkick">vue-chartkick</router-link></li>
</ul>
<h1>Demo examples of vue-charts</h1>
<div class="columns">
<div class="column">
<h3>Line Chart</h3>
<!--Line Chart Example-->
</div>
<div class="column">
<h3>Bar Chart</h3>
<!--Bar Chart Example-->
</div>
</div>
<div class="columns">
<div class="column">
<h3>Radar Chart</h3>
<!--Radar Chart Example-->
</div>
<div class="column">
<h3>Data Binding Line Chart</h3>
<!--Data Binding Line Chart Example-->
</div>
</div>
</section>
</template>
<script>
export default {
name: 'VueCharts',
data () {
return {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
dataset: [65, 59, 80, 81, 56, 55, 40]
}
}
}
</script>
<style scoped>
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>上記コードブロックでは、アプリ内の別ページへのリンクを表示するメニューを作りました。チャートを表示するために確保した場所にチャートを表示します。
scriptタグ内のdataオブジェクトに、各種チャートで使用するためのラベル（見出し）とデータを加え、styleタグ内にCSSを加えます。
チャートを作成します。
折れ線グラフ
折れ線グラフは、VueCharts.vueファイルのtemplateタグ内にあるコメント「Line Chart Example」に、<chartjs-line></chartjs-line>を挿入します。vue-chartsはmain.jsファイル内でグローバルに宣言されているので、コンポーネントを読み込む必要はありません。
棒グラフ
VueCharts.vueファイルのtemplateタグ内にあるコメント「Bar Chart Example」に、<chartjs-bar></chartjs-bar>を挿入します。
レーダーチャート
VueCharts.vueファイルのtemplateタグ内にあるコメント「Radar Chart Example」に、<chartjs-radar></chartjs-radar>を挿入します。
設定後、/chartsに移動して、チャートを確認します。
vue-chartsの折れ線グラフでのデータバインディング使用例
vue-chartsでのデータバインディングは、vue-chartjsとほとんど変わりません。vue-chartsは、データセットが変化したらチャートを自動で更新します。
まず関数「addData」を作り、コンポーネントのmethodsオブジェクトに追加します。
methods: {
addData () {
this.dataset.push(this.dataentry)
this.labels.push(this.datalabel)
this.datalabel = ''
this.dataentry = ''
}
}addDataメソッドは、フォームへの入力値およびラベルフォーム（下記）の入力の現在値を登録（プッシュ）します。そこでコンポーネントと、データとラベルの追加用フォームを作成します。以下のコードを、コメント「<!--Data Binding Line Chart Example-->」に挿入します。
<form @submit.prevent="addData">
<input placeholder="Add a Data" v-model="dataentry">
<input placeholder="Add a Label" v-model="datalabel">
<button type="submit">Submit</button>
</form>
<chartjs-line :labels="labels" :data="dataset" :bind="true"></chartjs-line>上記のコードは、データの値と見出しを入力して送信するためのフォームです。このチャートは自動で最新の入力値を反映します。
vue-chartkickでチャートを作成
vue-chartkickは、1行で美しいチャートが作れるVue用ラッパーです。4つの例「折れ線グラフ、棒グラフ、散布図、ダウンロード可能なチャート」でライブラリーの使い方を解説します。
チャートにはデータを扱う方法が2つあります。1つはインラインでデータを書き<bar-chart :data="[['Work', 1322], ['Play', 1492]]"></bar-chart>とする方法、もう1つはVueのdataオブジェクトにchartData配列を宣言し、<line-chart :data="chartData"></line-chart>と書く方法です。
data () {
return {
chartData: [['Jan', 44], ['Feb', 27], ['Mar', 60], ['Apr', 55], ['May', 37], ['Jun', 40], ['Jul', 69], ['Aug', 33], ['Sept', 76], ['Oct', 90], ['Nov', 34], ['Dec', 22]]
}
}vue-chartkickを使う前に、srcフォルダー内のmain.jsファイルを開いて以下のコードを加えます。
import Chartkick from 'chartkick'
import VueChartkick from 'vue-chartkick'
Vue.use(VueChartkick, { Chartkick })Chartkickライブラリーとvue-chartkickをnode_modulesからインポートして、Vue.use(VueChartkick, { Chartkick })の記述でグローバルに登録します。
先程作ったVueChartKick.vueファイルを開いて以下のコードを入力します。
<template>
<section class="container">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/chartjs">vue-chartjs</router-link></li>
<li><router-link to="/charts">vue-charts</router-link></li>
<li><router-link to="/chartkick">vue-chartkick</router-link></li>
</ul>
<h1>Demo examples of vue-chartkick</h1>
<div class="columns">
<div class="column">
<h3>Line Chart</h3>
<!--Line Chart example-->
</div>
<div class="column">
<h3>Bar Chart</h3>
<!--Bar Chart example-->
</div>
</div>
<div class="columns">
<div class="column">
<h3>Scatter Chart</h3>
<!--Scatter chart example-->
</div>
<div class="column">
<h3>Downloadable Line Chart</h3>
<!--Downloadable line chart-->
</div>
</div>
</section>
</template>
<script>
export default {
name: 'VueChartKick',
data () {
return {
chartData: [['Jan', 44], ['Feb', 27], ['Mar', 60], ['Apr', 55], ['May', 37], ['Jun', 40], ['Jul', 69], ['Aug', 33], ['Sept', 76], ['Oct', 90], ['Nov', 34], ['Dec', 22]]
}
}
}
</script>
<style scoped>
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>上記コードブロックで、アプリ内の別ページへのリンクを表示するメニューを作りました。チャートを表示するために確保した場所にチャートを持ってきます。
さらに、各種チャートで使うデータが入ったchartData配列をscriptタグ内のdataオブジェクト内に生成しました。styleタグ内に少しCSSを加えました。
それではチャートを作ります。
折れ線グラフ
vue-chartkickでの折れ線グラフの作成は、とてもシンプルです。vue-chartkickのLine chartコンポーネントを導入して、使いたいデータセットを決定します。たとえば<line-chart :data="chartData"></line-chart>です。データプロパティはVue dataオブジェクトのchartData配列内にセットします。
VueChartKick.vueファイルのコメント<!--Line Chart example-->を<line-chart :data="chartData"></line-chart>と入れ替えると、折れ線グラフがきれいに表示されます。
棒グラフ
前述の折れ線グラフと同様に棒グラフを作ります。少しやり方を変えて、データセットをchartData配列の代わりに、プロパティ内に持たせます。<bar-chart :data="[['Work', 1322], ['Play', 1492]]"></bar-chart>となります。
VueChartKick.vueファイル内のコメント<!--Bar Chart example-->を<bar-chart :data="[['Work', 1322], ['Play', 1492]]"></bar-chart>に変えれば、棒グラフが表示されます。
散布図
散布図も折れ線グラフ、棒グラフと同様、VueChartKick.vueファイル内のコメント<!--Scatter Chart example-->を<scatter-chart :data="[[174.0, 80.0], [176.5, 82.3], [180.3, 73.6]]"></scatter-chart>に変えます。
チャートのダウンロード
vue-chartkickには、vue-chartjsとvue-chartsにはないダウンロード可能なチャートを作成する機能があります。ユーザーはチャートを画像として簡単に保存できます。折れ線グラフで試しましょう。
<line-chart :data="chartData" :download="true"></line-chart>プロパティの:downloadをtrueにするだけです。
VueChartKick.vueファイル内のコメント<!--Downloadable line chart-->を<line-chart :data="chartData" :download="true"></line-chart>に変えればアプリのダウンロード機能を試せます。新しいチャートの上にカーソルをあてるとダウンロードボタンが表示されます。
デモ
比較
紹介した3つのVue.js用Chart.jsラッパーの長所と短所をまとめます。
vue-chartjs
vue-chartjsは3つのうちもっとも強力です。柔軟性に富み、リアクティブ機能（データに変更が生じた際に自動でチャートを更新する機能）を持っています。
短所は、たくさんの機能を持っているがゆえにチャートの初期設定がやや複雑であことと、ラッパーの設定として外部ファイルを作成する必要があることです。
vue-charts
vue-chartsはChart.jsラッパーとしてかなり優秀です。vue-chartjsと異なりセットアップは簡単で、データ処理やチャート描画に別のコンポーネントを必要とせず、チャートに必要なデータはすべてVueインスタンスに含まれます。リアクティブ機能（データに変更が生じた際に自動でチャートを更新する機能）もmixin無しで実現できます。
vue-chartkick
vue-chartkickもまたChart.jsラッパーとして優れています。3つのChart.jsラッパーのうちもっとも簡単に使える方法です。
vue-chartkickではチャートのデータセットの方法が2通りあります。<bar-chart :data="[['Work', 1322], ['Play', 1492]]"></bar-chart>のようにデータをインライン記述する方法と、Vue dataオブジェクト内にchartData配列を宣言し、<line-chart :data="chartData"></line-chart>のように記述する方法です。またvue-chartkickはチャートを画像としてダウンロード可能にするという、ほかのラッパーにはない優れた機能を持っています。
vue-chartkickの唯一の欠点は、そのままではリアクティブにチャートをリアルタイム更新できないことです。
最後に
Vue向けのChart.jsラッパーを紹介し、Webサイトで美しいチャートを使うための実例を紹介しました。
本チュートリアルで使ったコードはGitHubに掲載しています。ここで取得できます。また紹介したチャートのデモはここで確認できます。
（原文：Creating Beautiful Charts Using Vue.js Wrappers for Chart.js）
［翻訳：西尾 健史／編集：Livit］
