Chart.js Vue.js this.$el.getContext(';2d';)不是函数
我正在使用Vue.js版本2和Charts.js创建一个可以向其传递数据的组件,它将以一种很好的方式显示这些数据。这是我的代码:Chart.js Vue.js this.$el.getContext(';2d';)不是函数,chart.js,vuejs2,Chart.js,Vuejs2,我正在使用Vue.js版本2和Charts.js创建一个可以向其传递数据的组件,它将以一种很好的方式显示这些数据。这是我的代码: <template> <div class="container"> <canvas width="900" height="400"></canvas> </div> </template> <script> export default {
<template>
<div class="container">
<canvas width="900" height="400"></canvas>
</div>
</template>
<script>
export default {
props: ['customers','dates'],
mounted() {
console.log('Chart-Component mounted.');
var context = this.$el.getContext('2d');
console.log(context);
var myChart = new Chart(context, {
type: 'line',
data: {
labels: this.dates,
datasets: [{
label: '# of Votes',
data: this.customers,
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)'
],
borderWidth: 3,
cubicInterpolationMode: 'monotone',
lineTension: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
}
</script>
它工作得很好,但我只能使用我的组件一次,这显然不是我想要的。因此,我试图通过以下方式了解背景:
document.querySelector('#graph').getContext('2d');
this.$el.getContext('2d');
但是我得到了以下错误:
[Vue warn]:挂载挂钩中的错误:“TypeError:此.$el.getContext不是函数”
我在谷歌上搜索并查看了文档,但说实话,我对vue来说真的是个新手,我不确定我还能再搜索什么
因此,如果有人能帮助我,或者能告诉我下一步应该检查什么,我将不胜感激!谢谢
本例中的$el
是对div#container
的引用。你要做的是使用一个
ref用于注册对元素或子元素的引用
组成部分。该引用将在父项下注册
组件的$refs对象
您是否使用weex图表和weex gcanvas插件?您是否有任何示例代码来分享如何使用它?官方的那个已经不起作用了。
<div class="container">
<canvas ref="canvas" width="900" height="400"></canvas>
</div>
this.$refs.canvas.getContext('2d')