使用 Vue.js 和 Chart.js 制做绚丽多彩的图表

本文做者：Jakub Juszczak

编译：胡子大哈

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

英文链接：Creating stunning charts with Vue.js and 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>
      <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;
    }复制代码

最终结果

最终结果如图：

Happy Coding！若是本文对你有帮助，欢迎关注个人专栏-前端大哈，按期发布高质量前端文章。

---

我最近正在写一本《React.js 小书》，对 React.js 感兴趣的童鞋，欢迎指点。