前言

深入學習 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()。