首頁 > web前端 > js教程 > 主體

用Vue.js 和 Chart.js如何製作很炫的圖表

巴扎黑
發布: 2017-04-15 09:05:32
原創
2897 人瀏覽過

用Vue.js 和 Chart.js如何製作很炫的圖表

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

這篇文章中,我會教你如何自訂 chart.js 選項來製作很酷的圖表。

⚡ Quick Start

我們需要:

  • 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 刪掉,並且引入我們的圖表:

    <template>
      <p id="app">
        <p class="container">
          <p class="Chart__list">
            <p class="Chart">
              <h2>Linechart</h2>
              <line-example></line-example>
            </p>
          </p>
        </p>
      </p>
    </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
登入後複製

把我變得更漂亮

現在該做些美化工作了

以上是用Vue.js 和 Chart.js如何製作很炫的圖表的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!