vue init webpack awesome-charts


yarn add vue-chartjs -S


在 mount() 函数中使用我们准备好的数据和选项来调用 renderChart()方法。

import {Line} from 'vue-chartjs'
export default Line.extend({
mounted () {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data One',
backgroundColor: '#FC2525',
data: [40, 39, 10, 40, 39, 80, 40]
},{
label: 'Data Two',
backgroundColor: '#05CBE1',
data: [60, 55, 32, 10, 2, 12, 53]
}
]
}, {responsive: true, maintainAspectRatio: false})
}
})
之所以可以使用 renderChart() 方法是因为我们继承了 BaseChart，这个方法和一些属性都是在 BaseChart 中定义的。




CopyRaw
createLinearGradient()。
在 LineChart.js 中，我们创建了两个变量来保存渐变。代码如下：
this.gradient = this.$refs.canvas
.getContext(‘2d')
.createLinearGradient(0, 0, 0, 450)
this.gradient2 = this.$refs.canvas
.getContext(‘2d')
.createLinearGradient(0, 0, 0, 450)addColorStop()
this.gradient.addColorStop(0, ‘rgba(255, 0,0, 0.5)')
this.gradient.addColorStop(0.5, ‘rgba(255, 0, 0, 0.25)');
this.gradient.addColorStop(1, ‘rgba(255, 0, 0, 0)');
this.gradient2.addColorStop(0, ‘rgba(0, 231, 255, 0.9)')
this.gradient2.addColorStop(0.5, ‘rgba(0, 231, 255, 0.25)');
this.gradient2.addColorStop(1, ‘rgba(0, 231, 255, 0)');

borderColor: ‘#FC2525', 
pointBackgroundColor: ‘white', 
borderWidth: 1, 
pointBorderColor: ‘white',
import {Line} from 'vue-chartjs'
export default Line.extend({
data () {
return {
gradient: null,
gradient2: null
}
},
mounted () {
this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)
this.gradient2 = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)
this.gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)')
this.gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');
this.gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
this.gradient2.addColorStop(0, 'rgba(0, 231, 255, 0.9)')
this.gradient2.addColorStop(0.5, 'rgba(0, 231, 255, 0.25)');
this.gradient2.addColorStop(1, 'rgba(0, 231, 255, 0)');
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data One',
borderColor: '#FC2525',
pointBackgroundColor: 'white',
borderWidth: 1,
pointBorderColor: 'white',
backgroundColor: this.gradient,
data: [40, 39, 10, 40, 39, 80, 40]
},{
label: 'Data Two',
borderColor: '#05CBE1',
pointBackgroundColor: 'white',
pointBorderColor: 'white',
borderWidth: 1,
backgroundColor: this.gradient2,
data: [60, 55, 32, 10, 2, 12, 53]
}
]
}, {responsive: true, maintainAspectRatio: false})
}
})

.Chart {
background: #212733;
border-radius: 15px;
box-shadow: 0px 2px 15px rgba(25, 25, 25, 0.27);
margin: 25px 0;
}
.Chart h2 {
margin-top: 0;
padding: 15px 0;
color: rgba(255, 0,0, 0.5);
border-bottom: 1px solid #323d54;
}Creating stunning charts with Vue.js and Chart.js

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学php网。