计算属性作为对vue-chartjs的反应？

Question

我想弄清楚这段代码到底出了什么问题。总之，我有一个vuejs组件，它希望将数据传递给vue-chartjs图表组件。下面是vue-chartjs文档中的这示例，如下所示：

Parent.vue

<template>
      <line-canvas :chart-data="displaydatacollection"></line-canvas>
<template>

<script>
import LineCanvas from './LineCanvas'

export default () {
  components: LineCanvas,
  computed: {
    toDisplay () {
      // complicated function that returns something like
      //  [ { date: '2017-09-01T10:30:00Z', count: 12345 }, ... ]
    },
    displaylabels () {
      return this.toDisplay.map(elem => {
        return elem.date
      })
    },
    displaydata () {
      return this.toDisplay.map(elem => {
        return elem.count
      })
    },
    displaydatacollection () {
      return {
        labels: this.displaylabels,
        datasets: [
          {
            label: 'Cumulative',
            borderColor: '#00bfff',
            yAxisID: 'Cumulative',
            fill: false,
            pointRadius: 0,
            data: this.displaydata
          }
        ]
      }
    }
  }
}
</script>

LineCanvas.js

import { Line, mixins } from 'vue-chartjs'

export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  mounted () {
    this.renderChart(this.chartData)
  }
}

(以上代码是一系列主题变体中的最新代码，但这似乎是最接近于实际绘制图表的代码。)

当我在dev服务器上运行我的代码时，我会得到以下控制台错误：

TypeError: Cannot read property 'getBasePixel' of undefined at ChartElement.updateElement

和

Uncaught TypeError: Cannot read property 'skip' of undefined at ChartElement.draw

请注意，为了更忠实于这个示例，我尝试过的其他解决方案之一是使toDisplay成为一个数据字段，并将一个watch方法添加到从该字段导出的重新计算toDisplay的字段中，但结果是相同的。我的预感是，当reactiveProp传递给图表组件(因此成为post的标题)时，它与使用计算属性有关，但不确定这一点。有人能指出我做错了什么，为什么错了，并给出一些关于如何修复这个代码的线索吗？

-vue诉2.5.2 -vue-chartjs诉3.0.0 -chart.js v 2.7.0 -npm v 5.5.1

更新：

好的，在进一步讨论这个问题之后，我已经将问题隔离为yAxisID: 'Cumulative'。这一行使一张图表呈现得很愉快，而另一张图表则呈现得很好。奇怪，因为这个属性是该起作用 for Chart.js >v2.2。

Answer 1

我也会犯同样的错误。我最终意识到，我在稍微错误的地方定义了轴线的ID。我们需要看看图表选项，看看是否是相同的根本原因。

您的轴选项应该如下所示：

  scales: {
    yAxes: [{
      id: 'Cumulative'
    }]
  }

如果他们不这样做，你很可能会看到上面的错误。

一个更丑的修复方法是更改数据集中的轴标签，以匹配缺省值，例如put yAxisID: 'y-axis-1'.。