本文作者：Jakub Juszczak?
編譯：胡子大哈

翻譯原文：http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35bb8e0?
英文連接：Creating stunning charts with Vue.js and Chart.js

轉載請注明出處，保留原文鏈接以及作者信息

深入學習 chart.js 的選項來制作漂亮的圖表。交互式圖表可以給你的數據可視化提供很酷的展示方式。但是大多數開箱即用的解決方案用默認的選項并不能做出很絢麗的圖表。

這篇文章中，我會教你如何自定義 chart.js 選項來制作很酷的圖表。

? Quick Start

我們需要：

• Vue.js
• vue-chart.js
• vue-cli

使用?vue-cli?來搭基本架構，希望你已經安裝好了。我們使用?vue-chart.js?來作為 chart.js 的打包器。

vue init webpack awesome-charts

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

cd awesome-charts && yarn install

添加?vue-chartjs：

yarn add vue-chartjs -S

第一個圖表

現在我們來創建第一個折現表。

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

現在需要從?vue-chartjs?中引入折線表的基表，創建組件。

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

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

之所以可以使用?renderChart()?方法是因為我們繼承了 BaseChart，這個方法和一些屬性都是在 BaseChart 中定義的。

運行 & 測試

ok，現在從 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

在終端中運行 dev 腳本，就可以看到圖表了。

yarn run dev

把我變得更漂亮

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

從這里開始才是有趣的起點，使用它我們需要 canvas 對象。但這事并不難，vue-chartjs?中已經存在一個它的引用。我們可以使用?this.$refs.canvas?來訪問。

在 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)’);

現在就可以把?this.gradient?傳遞給?backgroundColor了，可以得到一個很好看的漸變。為了得到更好的效果，還可以設置 borderColor 的顏色，alpha 設置成 1 （或者用十六進制也行），設置 borderWidth 為 1，另外還可以設置 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; }

最終結果

最終結果如圖：

轉載于:https://www.cnblogs.com/Unknw/p/6689221.html

總結

以上是生活随笔為你收集整理的使用 Vue.js 和 Chart.js 制作绚丽多彩的图表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。