📈 vue-chartjs

Referência de codificação

Props

Existem alguns props básicas definidas nos componentes fornecidos pelo vue-chartjs. Porque você os estende, eles são invisíveis, mas você pode substituí-los:

PropDescrição
widthlargura do gráfico
heightaltura do gráfico
chart-idId da tela
css-classesString com classes css para a div circundante
stylesObjeto com estilos css para o div contêiner circundante
pluginsArray com plugins chartjs

Eventos

Se o mixin reactiveData ou reactiveProp estiver anexado, os seguintes eventos serão emitidos:

EventoDescrição
chart:renderse o mixin executar um renderizador completo
chart:destroyse o mixin excluir a instância do objeto de gráfico
chart:updatese o mixin executar uma atualização em vez de uma nova renderização
labels:updatese novos labals foram definidos
xlabels:updatese novos xLabels foram definidos
ylabels:updatese novos yLabels foram definidos

Métodos Globais

Os métodos globais precisam ser importados.

generateChart

  • Tipo: Function
  • Argumentos: chart-id, chart-type
  • Uso:
import { generateChart } from "vue-chartjs";
// O primeiro argumento é o ID do gráfico, depois o tipo de gráfico.
const CustomLine = generateChart("custom-line", "LineWithLine");

Métodos de instância

Os métodos de instância podem ser usados ​​dentro do componente do gráfico.

generateLegend()

Função auxiliar para gerar uma legenda HTML.

  • Tipo: Function
  • Argumentos: none
  • Uso:










 




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()
  }
}

addPlugin

No Chart.js, você pode definir plugins globais e embutidos. Os plug-ins globais estão funcionando sem problemas com o vue-chartjs como descrito no Chart.js docs.

Se você deseja adicionar plug-ins embutidos, vue-chartjs expõe um método auxiliar chamado addPlugin() Você deve chamar addPlugin() antes do método renderChart().

  • Tipo: Function
  • Argumentos: Array de Plugins
  • Uso:
mounted () {
  this.addPlugin({
    id: 'my-plugin',
    beforeInit: function (chart) {
      ...
    }
  })
}

renderChart()

Cria uma instância Chart.js e renderiza o gráfico.

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

Objeto Chart.js

Você pode acessar o objeto Chart.js dentro do componente do gráfico com this.$data._chart

Canvas

Você pode acessar canvas com this.$refs.canvas