使用 Vue.js 和 Chart.js 製作絢麗多彩的圖表

鬍子大哈發表於2017-04-13
Vue.js

本文作者：Jakub Juszczak

編譯：鬍子大哈

翻譯原文：huziketang.com/blog/posts/…

英文連線：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;
    }複製程式碼

最終結果

最終結果如圖：

使用 Vue.js 和 Chart.js 製作絢麗多彩的圖表

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

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

相關文章