使用Vue.js 和Chart.js制作絢麗多彩的圖表

2019-11-19 11:20:30

字體：大中小

供稿：網(wǎng)友

前言

深入學(xué)習(xí) chart.js 的選項(xiàng)來(lái)制作漂亮的圖表。交互式圖表可以給你的數(shù)據(jù)可視化提供很酷的展示方式。但是大多數(shù)開箱即用的解決方案用默認(rèn)的選項(xiàng)并不能做出很絢麗的圖表。

這篇文章中，我會(huì)教你如何自定義 chart.js 選項(xiàng)來(lái)制作很酷的圖表。

⚡ Quick Start

我們需要：

Vue.js
vue-chart.js
vue-cli

使用 vue-cli 來(lái)搭基本架構(gòu)，希望你已經(jīng)安裝好了。我們使用 vue-chart.js 來(lái)作為 chart.js 的打包器。

vue init webpack awesome-charts

然后到工程目錄中安裝依賴：

cd awesome-charts && yarn install

添加 vue-chartjs：

yarn add vue-chartjs -S

第一個(gè)圖表

現(xiàn)在我們來(lái)創(chuàng)建第一個(gè)折現(xiàn)表。

touch src/components/LineChart.js && subl .

現(xiàn)在需要從 vue-chartjs 中引入折線表的基表，創(chuàng)建組件。

在 mount() 函數(shù)中使用我們準(zhǔn)備好的數(shù)據(jù)和選項(xiàng)來(lái)調(diào)用 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})}})

代碼中，使用了一些實(shí)例數(shù)據(jù)和可選參數(shù)傳遞給 chart.js 的數(shù)據(jù)對(duì)象，并且設(shè)置 responsive:true，使得圖表會(huì)充滿外層容器。

之所以可以使用 renderChart() 方法是因?yàn)槲覀兝^承了 BaseChart，這個(gè)方法和一些屬性都是在 BaseChart 中定義的。

運(yùn)行 & 測(cè)試

ok，現(xiàn)在從 App.vue 中把 Hello.vue 刪掉，并且引入我們的圖表：

<template><div id="app"><div class="container"><div class="Chart__list"><div class="Chart"><h2>Linechart</h2><line-example></line-example></div></div></div></div></template><script>import LineExample from './components/LineChart.js'export default {name: 'app',components: {LineExample}}</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}.container {max-width: 800px;margin: 0 auto;}</style>CopyRaw

在終端中運(yùn)行 dev 腳本，就可以看到圖表了。

yarn run dev

把我變得更漂亮

現(xiàn)在該做些美化工作了💄 ，chart.js 中有很多很酷的技巧。可以傳遞一個(gè)十六進(jìn)制的顏色數(shù)據(jù)到backgroundColor，也可以傳遞 rgba() 值，還可以設(shè)置顏色的透明度。chart.js 使用的是 html canvas 來(lái)繪圖的，所以我們使用 createLinearGradient()。

從這里開始才是有趣的起點(diǎn)，使用它我們需要 canvas 對(duì)象。但這事并不難，vue-chartjs 中已經(jīng)存在一個(gè)它的引用。我們可以使用 this.$refs.canvas 來(lái)訪問(wèn)。

在 LineChart.js 中，我們創(chuàng)建了兩個(gè)變量來(lái)保存漸變。代碼如下：

this.gradient = this.$refs.canvas.getContext(‘2d').createLinearGradient(0, 0, 0, 450)this.gradient2 = this.$refs.canvas.getContext(‘2d').createLinearGradient(0, 0, 0, 450)

還有另外一個(gè)函數(shù)可以使用：addColorStop()

給每個(gè)漸變創(chuàng)建三個(gè)顏色點(diǎn)：

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)');

現(xiàn)在就可以把 this.gradient 傳遞給 backgroundColor了，可以得到一個(gè)很好看的漸變。為了得到更好的效果，還可以設(shè)置 borderColor 的顏色，alpha 設(shè)置成 1 （或者用十六進(jìn)制也行），設(shè)置 borderWidth 為 1，另外還可以設(shè)置 pointColor。

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

最后一步

最后一步是給 App.vue 的容器添加一些樣式。

.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;}

最終結(jié)果

最終結(jié)果如圖：