コーディング レファレンス

Props

vue-chartjsによって提供されるコンポーネントにはいくつかの基本的なプロパティが定義されています。 拡張しているので、それらは 見えない ですが、それらの値は上書きすることができます:

Prop名 説明
width チャート幅
height チャート高さ
chart-id canvas要素のid
css-classes 囲んでいる div の css クラス (文字列)
styles 囲んでいる div の css クラス (オブジェクト)
plugins chartjs プラグイン (配列)

Events

reactDataまたはreactPropミックスインが使用されている場合、以下のイベントが発行されます。

Event名 説明
chart:render ミックスインが完全にレンダリングしたとき
chart:destroy ミックスインがチャートオブジェクトインスタンスを削除したとき
chart:update ミックスインが再レンダリングの代わりに更新をしたとき
labels:update labelsがセットされたとき
xlabels:update xlabelsがセットされたとき
ylabels:update ylabelsがセットされたとき

Global Methods

グローバルメソッドはインポートして使用します。

generateChart

  • Type: Function
  • Arguments: chart-id, chart-type
  • Usage:
import { generateChart } from 'vue-chartjs'
// First argument is the chart-id, second the chart type.
const CustomLine = generateChart('custom-line', 'LineWithLine')

Instance Methods

インスタンスメソッドは独自のチャートコンポーネント内で使用することができます。

generateLegend()

HTMLの凡例を作成するヘルパー関数

  • Type: Function
  • Arguments: none
  • Usage:










 




import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props: ['datasets', 'options']
  data: () => ({
    htmlLegend: null
  })
  mounted () {
    this.renderChart(this.datasets, this.options)
    this.htmlLegend = this.generateLegend()
  }
}

プラグインの追加

Chart.jsでは、グローバルプラグインとインラインプラグインを定義できます。 グローバルプラグインは、Chart.js docsで説明されているようにvue-chartjsでも問題なく動作します。

インラインプラグインを追加したい場合に備えて、vue-chartjsaddPlugin()と呼ばれるヘルパーメソッドを公開します。

renderChart()メソッドの前に addPlugin()を呼び出すべきです。

  • Type: Function
  • Arguments: Array of Plugins
  • Usage:
mounted () {
  this.addPlugin({
    id: 'my-plugin',
    beforeInit: function (chart) {
      ....
    }
  })
}

renderChart()

Chart.js のインスタンスを作成して描画します。

  • Type: Function
  • Arguments: Chart Data, Chart Options
  • Usage:
mounted () {
  this.renderChart({
    labels: ['January', 'February'],
    datasets: [
      {
        label: 'Data One',
        backgroundColor: '#f87979',
        data: [40, 20]
      }
    ]},
    {
      responsive: true
    }
  )
}

Chart.js オブジェクト

独自のチャートコンポーネント内からChart.jsのオブジェクトには this.$data._chart でアクセスできます。

Canvas

Canvas要素には this.$refs.canvas でアクセスできます。