我正在使用 Vue.js 版本 2 和 Charts.js 创建一个组件,我可以将数据传递给它,它会以一种很好的方式显示这些。这是我的代码:
<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
}
}] …Run Code Online (Sandbox Code Playgroud)