本文作者：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-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; } 最終結果
最終結果如圖：