Vue.jsでカッコいいグラフを手軽に作るChart.jsのラッパー3つ

2017年09月04日　12時01分更新

文●Yomi Eluwande

ツイートする

Webアプリを作るときに便利なグラフ描画ライブラリ「Chart.js」。最近人気のVue.jsでChart.jsを使うための3つのラッパーをデモを交えて紹介します。

現代の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-project

webpackテンプレートを使った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 dev

localhost: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></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></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関数で、乱数を生成します。

チャートを表示して自動更新されるか確認するため、を以下の記述に置き換えます。

<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メソッドは、フォームへの入力値およびラベルフォーム（下記）の入力の現在値を登録（プッシュ）します。そこでコンポーネントと、データとラベルの追加用フォームを作成します。以下のコードを、コメント「」に挿入します。

    <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 :data="chartData"></line-chart>と入れ替えると、折れ線グラフがきれいに表示されます。

棒グラフ

前述の折れ線グラフと同様に棒グラフを作ります。少しやり方を変えて、データセットをchartData配列の代わりに、プロパティ内に持たせます。<bar-chart :data="[['Work', 1322], ['Play', 1492]]"></bar-chart>となります。

VueChartKick.vueファイル内のコメントを<bar-chart :data="[['Work', 1322], ['Play', 1492]]"></bar-chart>に変えれば、棒グラフが表示されます。

散布図

散布図も折れ線グラフ、棒グラフと同様、VueChartKick.vueファイル内のコメントを<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ファイル内のコメントを<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の唯一の欠点は、そのままではリアクティブにチャートをリアルタイム更新できないことです。