Вычисляемое свойство как реактивпроп к 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)
  }
}

(Приведенный выше код является последним в серии вариаций темы, но, похоже, он ближе всего подходит к фактическому отображению диаграммы.)

Когда я запускаю свой код на сервере разработки, я получаю консольные ошибки, такие как:

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.

Answer 1

Я получаю ту же ошибку. В конце концов я понял, что определяю идентификатор для оси в немного неправильном месте. Нам нужно увидеть параметры графика, чтобы понять, является ли это той же самой основной причиной.

Ваши параметры осей должны выглядеть примерно так:

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

Если они этого не делают, вы можете увидеть вышеупомянутую ошибку.

Более уродливое решение - изменить метки осей в наборах данных, чтобы они соответствовали стандартным, например yAxisID: 'y-axis-1'.