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

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

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

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

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

我們需要：

Vue.js

vue-chart.js

vue-cli

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

vue init webpack awesome-charts

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

cd awesome-charts && yarn install

添加 vue-chartjs：

yarn add vue-chartjs -S

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

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

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

在 mount() 函數(shù)中使用我們準(zhǔn)備好的數(shù)據(jù)和選項來調(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ù)據(jù)和可選參數(shù)傳遞給 chart.js 的數(shù)據(jù)對象，并且設(shè)置 responsive:true，使得圖表會充滿外層容器。

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

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

    
    
    
    
    
    CopyRaw

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

yarn run dev 

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

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

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

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

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

給每個漸變創(chuàng)建三個顏色點：

    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了，可以得到一個很好看的漸變。為了得到更好的效果，還可以設(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é)果如圖：

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

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