计算属性作为 vue-chartjs 的响应属性？答案

【问题标题】：Computed property as reactiveprop to vue-chartjs?计算属性作为 vue-chartjs 的响应属性？
【发布时间】：2017-11-01 19:40:37
【问题描述】：

我束手无策，试图找出这段代码有什么问题。归结起来，我有一个 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 方法添加到派生它的字段，以重新计算@987654329 @，但结果是一样的。我的直觉是它与使用计算属性有关，因为 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'。这条线区分了一个愉快地呈现的图表和一个糟糕的图表。奇怪，因为 Chart.js >v 2.2 的这个属性是 supposed to work。

【问题讨论】：

标签： vuejs2 vue-chartjs

【解决方案1】：

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

您的坐标区选项应如下所示：

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

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

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

【讨论】：