vue.js 图表chart.js使用

Posted 阿弥陀佛呵呵哒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js 图表chart.js使用相关的知识,希望对你有一定的参考价值。

在使用这个chart.js之前,自己写过一个饼图,总之碰到的问题不少,所以能用现成的插件就用,能节省不少时间

这里不打算介绍chart.js里面详细的参数意义和各个参数的用法,只作为首次使用chart.js的一个入门级的说明!

在使用之前,我找到了一个中文的chart.js的文档地址:http://www.bootcss.com/p/chart.js/docs/,打开后发现除了菜单是中文的,其他还是英文的,这个可能是从官方直接扒下来的版本,很久没更新了,部分参数和官方已经差距很大,还是直接看官方的吧http://www.chartjs.org/

首先还是npm安装chart.js

npm install chart.js --save

 

这里直接贴出来一个折线图的代码好了,比较直接

<template>
    <div class="small">
    
        <canvas id="myChart2" width="400px" height="400px"></canvas>
    </div>
</template>
<script>
import Chart from \'chart.js\';



export default {
    components: {

    },
    data() {
        return {

        }
    },
    mounted() {


        var ctx2 = document.getElementById("myChart2");

        var myChart2 = new Chart(ctx2, {
            type: "line",
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                datasets: [
                    {
                        label: "test1",
                        backgroundColor: "rgba(225,10,10,0.3)",
                        borderColor: "rgba(225,103,110,1)",
                        borderWidth: 1,
                        pointStrokeColor: "#fff",
                        pointStyle: "crossRot",
                        data: [65, 59, 0, 81, 56, 10, 40, 22, 32, 54, 10, 30],
                        cubicInterpolationMode: "monotone",
                        spanGaps: "false",
                        fill: "false"
                    }
                ]
            },
            options: {
                
            }

        });
    },
    methods: {

    }
}
</script>
<style>
.small {
    width: 500px;
    height: 500px;
}
</style>

效果图如下

new Chart(ctx2, configObject) 中的configObject对象中有三个重要的属性

          {
                type: "",
                data: {
                },
                options: {

                }

            }

type属性表示图形形状

line:折线图

bar:柱状图 

Radar:雷达图/蛛网图 

doughnut:圆环图 

pie:饼图 

polarArea:极地区域图

bubble:气泡分布图

scatter:散点图

data属性配置图形上的数据,data里的数据可以参考各个type的图每个参数的说明

options配置图形其他的可选项

另外我们选用一个库的一个很重要的因素是这个库浏览器的支持程度,经过实际的测试

IE9+和chrome,firefox支持canvas的都可以使用。

针对vue.js封装的vue-chartjs库:http://vue-chartjs.org,由于是封装库,几乎所有的参数都要参考chart.js的配置,只不过使用的方式改为vue特有的组件的形式

首先还是安装库

npm install vue-chartjs --save

例如我们要创建一个折线图

LineChart.js

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)
  }
})

RandomChart.vue

<template>
    <div class="small">
        <line-chart :chart-data="datacollection"></line-chart>
        <button @click="fillData()">Randomize</button>
    </div>
</template>

<script>
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
        }
    }
}
</script>

<style>
.small {
    max-width: 600px;
    margin: 150px auto;
}
</style>

如果在没有掌握chart.js的用法之前直接使用vue-chartjs的话,可能会有一些困难,vue-chartjs官方的文档只介绍了如何创建和使用插件部分,详细的属性配置还是需要去chart.js的文档里面找。

 

以上是关于vue.js 图表chart.js使用的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js - 通过 Webpack 注册图表组件

Chart.js 图表未呈现

从 jsonfile 数据创建多个 chart.js 图表

chart.js轻量级图表插件使用

在函数内部创建图表时,销毁 chart.js 不起作用 - chart.destroy() 不是函数

更改使用 chart.js 创建的图表中的轴线颜色