vue-chartjs/docs/ja

search

search
ja

vue-chartjs

vue-chartjs は Chart.js をvueで使用するためのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。

イントロ

vue-chartjs vueの中であまり面倒ことがなくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。

chart.jsの基本ロジックを抽象化していますが、公開されたchart.jsのオブジェクト使用して柔軟にカスタマイズできます。

インストール

Vue.jsの Version2以上を使用している場合は簡単にインストールできます。:

yarn add vue-chartjs chart.js

Vue.jsの Version 1.xを使用している場合はlegacyタグを使用してください。しかし、vueのバージョン1はもうメンテナンスされません。

yarn add vue-chartjs@legacy

クイックスタート

BaseChartをインポートしてextendします。

異なるデータのチャートを表示するときに柔軟性が大幅に向上します。 コンポーネントをカプセル化し、プロパティをコンポーネントのデータに渡したり、コンポーネント内に直接データを記述することができます。ただし直接データを記述した場合はコンポーネントの再利用ができません。

パッケージ全体またはモジュールごとに個別にインポートすることができます。

// CommitChart.js
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart(data, options)
  }
}

renderChart()メソッドに2つの引数を渡すことができます:

• Data object
• Options object

データオブジェクト

データオブジェクトは、次のようになります。:

{
  labels: ['January', 'February'],
  datasets: [
    {
      label: 'GitHub Commits',
      backgroundColor: '#f87979',
      data: [40, 20]
    }
  ]
}

詳細については、Chart.js のドキュメントをご覧ください。

プロパティ

BaseChartsには基本プロパティがいくつか定義されています。 extend()したときにそれらは 表示されていません が、使用するときに上書きして設定することができます。

プロパティ	説明
width	chartの表示幅
height	chartの表示高さ
chart-id	canvas要素のid
css-classes	周囲のdivのCSSクラスの文字列
styles	周囲のdivコンテナのCSSスタイルを持つオブジェクト

実装例

いくつか例を記載します。

プロパティの利用

dataとoptionsプロパティを作成して、チャートにデータを渡すことが出来ます。

// LineChart.js
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props: ['data', 'options'],
  mounted () {
    this.renderChart(this.data, this.options)
  }
}

コンポーネントに追加して、使用することができます。

 <line-chart :data="{your data object}" :options="{your options}"></line-chart>

幅と高さを上書きする場合:

 <line-chart
  :data="{your data object}"
  :options="{responsive: false, maintainAspectRatio: false}"
  :width="400"
  :height="200"
  >
 </line-chart>

固定値の`width` と `height` を反映させるためには、 `responsive：false` を設定しなければならないことに注意してください。

コンポーネント内のローカルデータを使用する場合

import {Bar} from 'vue-chartjs'

export default {
  extends: Bar,
  data () {
    return {
      datacollection: {
        labels: ['January', 'February'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20]
          }
        ]
      }
    }
  }
  mounted () {
    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
  }
}

コンポーネントの再利用

チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することがベストです。このようにしてチャートコンポーネントは純粋なデータ表示と、背後にあるロジックのラッパーとしてのみ責務を負います。単一ページアプリケーションを実行している場合や、たとえば laravel などで統合されている場合は、異なった方法があります。

リアクティブデータ

Chart.js はデータセットを変更したときのライブアップデートを提供していません。vue-chartjs ではこれを実現するために2つのミックスインを提供します。

• reactiveProp
• reactiveData

この２つのミックスインは実際には同じものです。 ほとんどの場合 reactiveProp を使用します。これはチャートコンポーネントのロジックを拡張し、自動的に chartData という名前のプロパティを追加し、さらにこのプロパティに対して vue watch を追加します。 データの更新に対して、データセット内のデータのみが変更されたときには update() を呼び出し、新しいデータセットが追加された場合は renderChart() が呼び出されます。

reactiveData は単純に(プロパティではない!!)ローカルの chartData 変数を追加し、ウォッチャーを追加します。 単一の目的のチャートのみ必要でチャートコンポーネント内でAPI呼び出しを行うときのみ有用です。

data () {
  return {
    chartData: null
  }
}

例

LineChart.js

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}

RandomChart.vue

<template>
  <div class="small">
    <line-chart :chart-data="datacollection"></line-chart>
    <button @click="fillData()">Randomize</button>
  </div>
</template>

<script>
  import LineChart from './LineChart.js'

  export default {
    components: {
      LineChart
    },
    data () {
      return {
        datacollection: null
      }
    },
    mounted () {
      this.fillData()
    },
    methods: {
      fillData () {
        this.datacollection = {
          labels: [this.getRandomInt(), this.getRandomInt()],
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [this.getRandomInt(), this.getRandomInt()]
            }, {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [this.getRandomInt(), this.getRandomInt()]
            }
          ]
        }
      },
      getRandomInt () {
        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
      }
    }
  }
</script>

<style>
  .small {
    max-width: 600px;
    margin:  150px auto;
  }
</style>

⚠ 注意:親コンポーネントでデータを変更し、それを子チャートコンポーネントに渡す場合は、JavaScriptの制限事項に注意してください。 この問題の詳細 [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)

制限事項

• [注意事項](https://jp.vuejs.org/v2/guide/list.html#注意事項)
• [変更検出の注意事項](https://jp.vuejs.org/v2/guide/reactivity.html#変更検出の注意事項)
• [vm.$watch](https://jp.vuejs.org/v2/api/#vm-watch)

Chart.js オブジェクト

時にはchart.jsをより詳細に制御する必要があります。そのためには this.$data._chart を使ってChart.jsインスタンスにアクセスすることができます。

インライン プラグイン

Chart.jsでは、グローバルプラグインとインラインプラグインを定義できます。[Chart.js docs]（http://www.chartjs.org/docs/latest/developers/plugins.html）で記載されているのようなグローバルプラグインは、 vue-chartjs で問題なく動作しています。

Example

mounted () {
  this.addPlugin({
    id: 'my-plugin',
    beforeInit: function (chart) {
      ....
    }
  })
}

利用可能なグラフ

棒グラフ

棒グラフには `{Bar}` と `{HorizontalBar}` の2つのバージョンがあります。

折れ線グラフ

ドーナツチャート

パイチャート

レーダーチャート

鶏頭図

バブルチャート

散布図

このチャートは、他のものとは異なるデータ構造を持っています。現在のところ、reactive mixins はこのチャートタイプでは機能していません。

ビルド方法の違い

あなたが使用するビルドツールに依存した３つの異なるエントリーポイントがあります。 依存するライブラリは一緒にバンドルされているか、または peerDependency として指定します。

• Browser
• Browserify / Webpack 1
• Webpack 2

Build	Chart.js	Vue.js
vue-chartjs.full.js	Bundled	Bundled
vue-chartjs.full.min.js	Bundled	Bundled
vue-chartjs.js	peerDependency	peerDependency
vue-chartjs.min.js	peerDependency	peerDependency
es/index*	peerDependency	peerDependency

ブラウザー

vue-chartjs をビルドツールを使用せず直接ブラウザー内で使用します。 例 codepen このケースでは縮小版の vue-chartjs.full.min.js を使用します。これにはVue.js と Chart.js が 含まれていて、UMD Module として定義されています。従ってあなたはただ一つのファイルしか必要としません。

Browserify / Webpack 1

Gulp、BrowserifyまたはWebpackのバージョン1を使用している場合は、トランスパイル され UMD Moduleとして バンドル された vue-chartjs.js を使用します。

Vue.jsとChart.jsは peerDependencies なので別にインストールする必要があります。ほとんどのプロジェクトでは、Vue.jsはすでにインストールされているでしょう。この方法では、このパッケージと異なるバージョンのVue.jsとChart.jsを持つことができます。

Webpack 2

Webpack 2を使用している場合、 jsnext:main または module にes/index.js を指定します。 ソースファイルは トランスパイル されます。またmoduleには バンドル されません。このようにすると tree shaking が動作します。バンドル版のように、peerDependencies で指定された Vue.js と Chart.js はインストールする必要があります。

Resources

以下に vue-chartjs の使い方に関するチュートリアルのようなリソースがあります

• Using vue-chartjs with WordPress
• Create stunning Charts with Vue and Chart.js
• Let’s Build a Web App with Vue, Chart.js and an API Part I
• Let’s Build a Web App with Vue, Chart.js and an API Part II
• Build a realtime chart with VueJS and Pusher