未使用 Vue Chart JS 选项

Question

我在我的 Nuxt JS/Vue 项目中使用 Vue Chart JS v3.5.1，我注意到当尝试使用选项并将它们作为道具传递时，没有任何反应，图表默认返回图表的默认值尽管我覆盖了设置。

我有几个文件：

• plugins/LineChart.js
• components/LineChart.vue

plugins/LineChart.js

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

export default {
  extends: Line,
  mixins: [reactiveProp],
  computed: {
    localOptions: function() {
      return this.chartOptions
    },
    localData: function() {
      console.log(`data: ${this.chartData}`)
      return this.chartData
    }
  },
  mounted () {
    this.renderLineChart()
  },
  methods: {

    /*
    ** Render a line chart
    */
    renderLineChart () {

      // this.chartdata is created in the mixin.
      // If you want to pass options please create a local options object
      this.renderChart(this.localData, this.localOptions)
    }

  },
  watch: {
    chartData: {
      handler: function (val, oldVal) {
        this._data._chart.destroy()
        this.renderLineChart()
      },
      deep: true
    },
    chartOptions: {
      handler: function (val, oldVal) {
        this.localOptions = val
      },
      deep: true
    }
  }
}

components/LineChart.vue

<template>
  <div>
    <line-chart :chart-data="customChartData" :chart-options="customChartOptions" class="data-chart"></line-chart>
  </div>
</template>

<style>
.data-chart canvas {
  width: 100% !important;
  height: auto !important;
}
</style>

<script>
import LineChart from '~/plugins/LineChart.js'
export default {
  components: {
    LineChart
  },
  props: {
    labels: {
      type: Array,
      default: null
    },
    datasets: {
      type: Array,
      default: null
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      customChartData: {},
      customChartOptions: {}
    }
  },
  mounted () {
    this.fillData()
  },
  methods: {
    fillData () {
      this.customChartData = {
        labels: this.labels,
        datasets: this.datasets
      }
      this.customChartOptions = {
        options: this.options
      }
    }
  }
}
</script>

我的用法相当简单，但我没有显示我的选项？

<LineChart
  :options="{
    responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            gridLines: {
              display: false
            },
            ticks: {
              autoSkip: true,
              maxTicksLimit: 3,
              maxRotation: 0,
              minRotation: 0
            }
          }],
          yAxes: [{
            display: true,
            gridLines: {
              display: true,
              color: '#f3f5f6'
            }
          }]
        },
        elements: {
          point: {
            radius: 0,
            hitRadius: 35
          }
        }
  }"
  :labels="['test']"
  :datasets="[{
    fill: false,
    borderWidth: 2.5,
    pointBackgroundColor: '#fff',
    borderColor: '#5046e5',
    data: [500,
  }]"
/>

我做错了什么？

更新

另外，页面上的很多图表中我似乎只有第一个图表显示数据，为什么一系列图表中只有一个图表显示数据，每个图表我都有一个键。

Answer 1

在您的 fillData 中，您似乎分配了错误的选项。 Vue Chartjs 需要一个带有选项的对象，而不是带有选项的字段选项的对象。

如果您将：this.customChartOptions = {options: this.options} 更改为：this.customChartOptions = this.options，它应该可以工作