Skip to content

Latest commit

 

History

History
 
 

ja

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

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

実装例

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

プロパティの利用

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
    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](apertureless#44)

制限事項

Chart.js オブジェクト

場合によっては、chart.jsをより詳細に制御する必要があります。Chart.jsインスタンスには this.$data._chart を使ってアクセスします。

利用可能なグラフ

棒グラフ

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

Bar

折れ線グラフ

Line

ドーナツチャート

Doughnut

パイチャート

Pie

レーダーチャート

Pie

鶏頭図

Pie

バブルチャート

Bubble

ビルド方法の違い

あなたが使用するビルドツールに依存した３つの異なるエントリーポイントがあります。 依存するライブラリは一緒にバンドルされているか、または 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 はインストールする必要があります。