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

Props #

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

Events #

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

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-chartjsはaddPlugin()と呼ばれるヘルパーメソッドを公開します。

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 でアクセスできます。