chartjs更新数据 vue_vue中使用chart.js

1，安装chart.js和vue-chart.js

npm install chart.js --save

npm install vue-chart.js --save

2，独立文件，方便修改

封装js,这是折线图的，其他也差不多是这样，改一下Line加以区别就好

import { Line, mixins } from ‘vue-chartjs‘

const { reactiveProp } = mixins

export default Line.extend({

mixins: [reactiveProp],

props: [‘options‘],

mounted () {

// this.chartData is created in the mixin

this.renderChart(this.chartData, this.options)

}

})

3，vue中使用；数据格式可以去chart.js查看，有细说，差不多把chart.js里的data()复制到datacollection里就可以

Randomize

import LineChart from ‘./LineChart.js‘

export default {

components: {

LineChart

},

data() {

return {

datacollection: { labels: [], datasets: [] }

}

},

mounted() {

this.fillData()

},

methods: {

fillData() {

let result = {

labels: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(),this.getRandomInt()],

datasets: [

{

label: ‘Data One‘,

backgroundColor: ‘#f87979‘,

data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(),this.getRandomInt()]

}, {

label: ‘Data One‘,

backgroundColor: ‘#0f0‘,

data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(),this.getRandomInt()]

}

]

};

console.log(result);

this.datacollection = result;

},

getRandomInt() {

return Math.floor(Math.random() * (50 - 5 + 1)) + 5

}

}

}

2018年的代码，如果不能正常显示，请自行查阅官方文档修改参数