无法使用vue图表绘制散点图
无法使用vue图表绘制散点图
提问于 2019-05-25 23:30:42
我最终得到的是空白页面和错误
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>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-26 00:32:47
问题出在额外的数据集参数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之间的值)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56306234
复制相关文章
相似问题