我试图在vuejs中使用chartjs构建一个图表。我有一个名为donut.js的文件,我在其中声明了我的图表的功能:
import { Doughnut, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Doughnut,
mixins: [reactiveProp],
props: ['chartData'],
mounted () {
this.renderChart(this.chartData, {responsive: true, maintainAspectRatio:
false})
}
}
我有一个文件,它是我获取数据和颜色的包装器。
template>
<div class="small">
<p>{{ labelValues }}</p>
<p>{{ dataValues }}</p>
<DonutChart :chartData="datacollection"></DonutChart>
</div>
</template>
<script>
import DonutChart from '../js/donut.js'
// import { Doughnut } from 'vue-chartjs'
// const { reactiveProp } = mixins
export default {
props:{
labelValues: Array,
dataValues:Array,
},
components: {
DonutChart
},
data () {
return {
datacollection: null,
setcolors_one:['#e6fff5','#ccffeb','#b3ffe0','#99ffd6','#80ffcc','#66ffc2','#4dffb8','#33ffad','#1affa3','#00ff99','#00e68a','#00cc7a'],
setcolors_two:['#e6f2ff','#cce6ff','#b3d9ff','#99ccff','#80bfff','#66b3ff','#4da6ff','#3399ff','#1a8cff','#0080ff','#0073e6','#0066cc'],
label_values:this.labelValues,
data_values:this.dataValues
}
},
mounted () {
this.fillData()
},
methods: {
fillData () {
console.log("labels",this.labelValues,"datavalues",this.dataValues)
this.datacollection.set = {
labels: this.label_values,
datasets: [
{
label: 'Data One',
backgroundColor:this.chartColors(2),
data: this.data_values
},
]
}
},
chartColors(labels_length){
let colors_vector = []
for(let i = 0; i < labels_length; i++){
if(i % 2 === 0){
colors_vector.push(this.setcolors_one[Math.floor((Math.random() * this.setcolors_one.length))])
}else{
colors_vector.push(this.setcolors_two[Math.floor((Math.random() * this.setcolors_two.length))])
}
}
return colors_vector;
}
}
}
</script>
<style>
.small {
max-width: 600px;
margin: 150px auto;
}
</style>
我使用来自其他组件的v-bind发送信息,问题是数据没问题,我可以在包装器中获取它,但是图表永远不会出现。