摘要：但是大多數開箱即用的解決方案用默認的選項并不能做出很絢麗的圖表。這篇文章中，我會教你如何自定義選項來制作很酷的圖表。我們使用來作為的打包器。代碼中，使用了一些實例數據和可選參數傳遞給的數據對象，并且設置，使得圖表會充滿外層容器。

本文作者：Jakub Juszczak 
編譯：胡子大哈 
翻譯原文：http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35bb8e0  
英文連接：Creating stunning charts with Vue.js and Chart.js

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

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

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

我們需要：

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 刪掉，并且引入我們的圖表：

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

最終結果如圖：

Happy Coding！如果本文對你有幫助，歡迎關注我的專欄-前端大哈，定期發布高質量前端文章。

我最近正在寫一本《React.js 小書》，對 React.js 感興趣的童鞋，歡迎指點。