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

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

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

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

這篇文章中，我會(huì)教你如何自定義 chart.js 選項(xiàng)來(lái)制作很酷的圖表。

我們需要：

Vue.js

vue-chart.js

vue-cli

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

vue init webpack awesome-charts

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

cd awesome-charts && yarn install

添加 vue-chartjs：

yarn add vue-chartjs -S

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

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

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

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

之所以可以使用 renderChart() 方法是因?yàn)槲覀兝^承了 BaseChart，這個(gè)方法和一些屬性都是在 BaseChart 中定義的。

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

    
    
    
    
    
    CopyRaw

在終端中運(yùn)行 dev 腳本，就可以看到圖表了。

yarn run dev 

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

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

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

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

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

給每個(gè)漸變創(chuàng)建三個(gè)顏色點(diǎn)：

    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了，可以得到一個(gè)很好看的漸變。為了得到更好的效果，還可以設(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！如果本文對(duì)你有幫助，歡迎關(guān)注我的專欄-前端大哈，定期發(fā)布高質(zhì)量前端文章。

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