Question

我在我的智慧＆＃39;最终试图弄清楚这段代码有什么问题。简而言之，我有一个vuejs组件想要将数据传递给vue-chartjs图表组件。按照vue-chartjs文档中的this示例，我有以下内容：

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

（以上代码是主题的一系列变体中的最新代码，但这似乎与实际呈现图表最接近。）

当我在开发服务器中运行我的代码时，出现如下控制台错误：

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（因此是帖子的标题）有关，但我不确定这一点。有人可以指出我做错了什么，为什么它错了，并提供一些关于如何修复此代码的线索？

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

更新

好的，在更多地讨论这个之后，我已将问题隔离为yAxisID: 'Cumulative'。这条线区分了一个快乐渲染的图表和一个barfs的图表。很奇怪，因为此属性为Chart.js＆gt; v 2.2。{/ 3> supposed to work

Answer 1

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

您的轴选项应如下所示：

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

如果他们不这样做，您可能会看到上述错误。

更丑陋的修复方法是更改数据集中的轴标签以匹配默认值，例如yAxisID: 'y-axis-1'.

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

更新

1 个答案: