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之间的值）

无法通过vue图表绘制散点图

1 个答案: