2

我束手无策，试图弄清楚这段代码有什么问题。归结起来，我有一个 vuejs 组件，它想将数据传递给 vue-chartjs 图表组件。按照vue-chartjs 文档中的这个示例，我有如下内容：

父.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'. 这条线区分了一个愉快地呈现的图表和一个糟糕的图表。奇怪，因为这个属性应该适用于 Chart.js >v 2.2。

4

1 回答 1

0

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

您的轴选项应如下所示：

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

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

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

于 2018-05-01T07:53:42.897 回答