Невозможно нарисовать точечную диаграмму с помощью диаграмм Vue

Question

В результате я получаю пустую страницу и ошибку

TypeError: Невозможно прочитать свойство 'getBasePixel' с неопределенным значением

и диаграммы на странице нет.Я новичок в vue.js, поэтому может быть полностью использовать ошибку, но я пытался использовать в основном демки со страницы vue-chartjs.и страница chart.js.Кажется, где-то я облажался, но не вижу, где.Некоторые люди сообщают, что хром.Любая помощь с этим будет оценена.Попытка ввести несколько потоков данных..2, если быть точным ....

CHARTS.JS

import { Scatter, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Scatter,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}

Randomchart.vue *

<template>
  <div class="small">
    <scatter :chart-data="datacollection" :chart-options="options"></scatter>
    <button @click="fillData()">Randomize</button>
  </div>
</template>

<script>
  import Scatter from '@/components/Chart1.js'

  export default {
    components: {
      Scatter
    },
    data () {
      return {
        datacollection: null,
        options: null
      }
    },
    mounted () {
      this.fillData()
    },
    methods: {
      fillData () {
          console.log("firing phiil");
        this.datacollection = {
            datasets: [{
            label: 'My First dataset',
            xAxisID: 'x-axis-1',
            yAxisID: 'y-axis-1',
            borderColor: 'rgba(47, 152, 208, 0.2)',
            backgroundColor: [
                                'rgba(47, 152, 208, 0.2)',
                            ],
            data: [{
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }, {
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }, {
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }, {
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }, {
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }, {
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }, {
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }]
        }, {
            label: 'My Second dataset',
            xAxisID: 'x-axis-1',
            yAxisID: 'y-axis-2',
            borderColor: 'rgba(0, 0, 208, 0.2)',
            backgroundColor: [
                                'rgba(47, 152, 208, 0.2)',
                            ],
            data: [{
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }, {
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }, {
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }, {
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }, {
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }, {
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }, {
                x: randomScalingFactor(),
                y: randomScalingFactor(),
            }]
        }]
    }
        console.log(this.datacollection);
      }

}
  }

 function randomScalingFactor () {
        return Math.round(Math.random(-100, 100));
    }
</script>

<style>
  .small {
    max-width: 600px;
    margin:  150px auto;
  }
</style>

Answer 1

Проблема в дополнительных параметрах наборов данных xAxisID и yAxisID.

кажется, что они установлены неправильно, поэтому, когда vue-charts пытается получить ссылки на эти элементы DOM, он получает undefined, таким образом, ошибка.

Вы должны либо удалить эти параметры, либо добавить эти элементы (с помощью параметров или вручную)

Вот рабочая версия приложения

PS: также, если вам нужно получить случайное число из интервала [-100, 100], вы должны использовать Math.round(Math.random() * 200) - 100. В вашей версии он всегда возвращает либо 1, либо 0 (поскольку Math.random не принимает параметров и всегда возвращает значение в диапазоне от 1 до 0)