无法用vue-charts绘制散点图

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，因此会出现错误。

您应该删除这些参数，或者添加这些元素（通过选项或手动）

Here is a working version of the app

PS：另外，如果你需要从区间 [-100, 100] 中获取一个随机数，你应该使用Math.round(Math.random() * 200) - 100。 在您的版本中，它总是返回 1 或 0（因为 Math.random 不带参数并且总是返回 1 到 0 之间的值）