欢迎来到[自学php网] ①群 287460651

主页 > 前端 > vue教程 >

使用Vue.js 和Chart.js制作绚丽多彩的图表

来源:自学PHP网    时间:2019-07-23 15:24 作者:小飞侠

[导读] 使用Vue.js 和Chart.js制作绚丽多彩的图表...

前言

这篇文章中,我会教你如何自定义 chart.js 选项来制作很酷的图表。

  • vue-cli

    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网。

    最新文章

    点击排行

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

    京ICP备14009008号@版权所有www.zixuephp.com

    网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com