chart.js angular組件封裝(ng6)、實戰配置、插件編寫

前言

項目須要使用chart.js插件，因爲項目是使用angular開發，那麼我第一步就是先把chart.js改形成angular組件來使用。

本項目代碼均可以在github上下載：項目git地址

angular改造

一、搭建angular項目步驟省略了，能夠自行查詢ng官方文檔

二、建立一個chart-js的組件

ng g c chart-js

chart-js.component.html

<div style="display: block; height: 100%">
  <canvas #canvas></canvas>
</div>

chart-js.component.ts

import {
  Component,
  OnInit,
  ViewChild,
  ElementRef,
  AfterViewInit,
  Input,
  OnChanges,
  SimpleChanges,
  OnDestroy
} from "@angular/core";
import "chart.js";

declare var window: any;
@Component({
  selector: 'chart-js',
  templateUrl: './chart-js.component.html',
  styleUrls: ['./chart-js.component.css']
})
export class ChartJsComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {

  @ViewChild("canvas") canvas: ElementRef;

  @Input() config;

  private chart;

  constructor() { }

  ngOnInit() {
  }
  // 子組件加載完成後，渲染圖標
  ngAfterViewInit() {
    this.render();
  }
  // 渲染圖表
  render() {
    this.chart = new window.Chart(
      this.canvas.nativeElement.getContext("2d"),
      this.config
    );
    this.chart.height = "100%";
  }
  // 判斷Input參數config 是否變化，若是變化，觸發更新繪圖
  ngOnChanges({ config }: SimpleChanges) {
    if (config && !config.isFirstChange()) {
      this.destroyChart();
      this.render();
    }
  }
  // 銷燬chart  
  ngOnDestroy() {
    this.destroyChart();
  }
  // 銷燬chart主體
  destroyChart() {
    if (this.chart) {
      this.chart.destroy();
      this.chart = undefined;
    }
  }
}

好了angular組件就這樣改造完成了，接下來咱們看下如何調用把

// html
<div style="width:50%;margin:0 auto;">
  <chart-js [config]="config"></chart-js>
</div>

// ts
// 一份簡單的配置，後續會詳細解釋配置的含義
this.config = {
      type: 'bar',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero:true
            }
          }]
        },
        onHover(event, elements) {
          console.log(event,elements);
        },
      }
    }

看下效果吧：

配置詳解

具體配置能夠參考下面連接，很是全面
Chart.js中文文檔

配置一個複合圖表

常常能夠看到一個數據表中包含幾種方式的展現具體看圖：

既有柱狀圖也有折線圖。像這樣的該如何進行配置呢？
只須要在dataset裏面新增一種數據類型並制定相應的type便可，具體以下

datasets: [
          {
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255,99,132,1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
          },
          {
            type: "line", // 將此數據集類型變爲折線圖
            label: "Line Dataset",
            data: [3, 5, 7, 16]
          }
        ]

查看完整配置代碼

chart.js 插件編寫

插件擴展分爲全局插件和內聯插件

【內聯插件】

插件也能夠直接在圖表插件配置（即內聯插件）中定義

var chart = new Chart(ctx, {
    plugins: [
        {
            beforeInit: function(chart, options) {
                //..
            }
        }
    ]
});

【全局插件】

插件能夠在全局範圍內註冊，應用於全部圖表（即全局插件）

Chart.pluginService.register({
    // plugin implementation
});

【編寫一個插件】
回顧下上面咱們畫的圖表

若是這個時候產品跟咱們說，想在這個圖表上添加一個背景色，且背景色能夠設置。

咱們趕忙翻到柱狀/條形圖(Bar)的配置這裏查看，發現並無這個配置項，只能對各個柱狀/條形圖填充色。並不能對整個背景填充顏色

怎麼辦？編寫插件吧。

查看下文檔發現插件提供了一些鉤子函數給咱們：

那麼咱們開始正式編寫插件

beforeDraw: function(chartInstance) {
            // chartInstance === 畫布實例
            
            // 首先咱們去獲取配置表，看是否配置了chartAreaBackground，若是沒有配置則不執行
            if (!chartInstance.options.chartAreaBackground) return;
            var ctx = chartInstance.chart.ctx; // 獲取畫布上下文
            var chartArea = chartInstance.chartArea; // 畫布區域
            var left = chartArea.left;
            var right = chartArea.right;
            var yOptions = chartInstance.scales["y-axis-0"];
            var yAxesTop = yOptions.paddingTop;
            var yAxesBottom = yOptions.paddingBottom;
            var top = chartArea.top + yAxesTop;
            var bottom = chartArea.bottom - yAxesBottom;
            var width = right - left; // 獲取到畫布寬度
            var height = bottom - top; // 獲取畫布的高度
            ctx.fillStyle = chartInstance.options.chartAreaBackground; // 獲取背景色
            ctx.fillRect(left, top, width, height); // 舉行填充
          }

若是對區域的位置不清楚的能夠看下面的標註：

插件編寫好了。如何使用呢？
插件裏面經過判斷chartInstance.options.chartAreaBackground 這個是否配置。那麼很明顯，咱們對這個進行配置就能夠了

options:{
    chartAreaBackground:'#f5f5f5'
}

再來看下效果：

灰色背景色已經出現了。說明內聯插件咱們已經配置成功了。

【把上面的插件改形成全局插件】
新建文件 chart-plugin.ts

import * as Chart from "chart.js";

const drawBgColorFactory = function (Chart) {
  const drawBgColor = {
    beforeDraw: function(chartInstance) {
      // chartInstance === 畫布實例
      console.log(chartInstance);
      // 首先咱們去獲取配置表，看是否配置了chartAreaBackground，若是沒有配置則不執行
      if (!chartInstance.options.chartAreaBackground) return;
      var ctx = chartInstance.chart.ctx; // 獲取畫布上下文
      var chartArea = chartInstance.chartArea; // 畫布區域
      var left = chartArea.left;
      var right = chartArea.right;
      var yOptions = chartInstance.scales["y-axis-0"];
      var yAxesTop = yOptions.paddingTop;
      var yAxesBottom = yOptions.paddingBottom;
      var top = chartArea.top + yAxesTop;
      var bottom = chartArea.bottom - yAxesBottom;
      var width = right - left; // 獲取到畫布寬度
      var height = bottom - top; // 獲取畫布的高度
      ctx.fillStyle = chartInstance.options.chartAreaBackground; // 獲取背景色
      ctx.fillRect(left, top, width, height); // 舉行填充
    }
  };

  Chart.pluginService.register(drawBgColor);
};


drawBgColorFactory(Chart);

這樣咱們就在全局註冊成功了

小結

那麼至此全局插件，局部插件咱們都已經實現了，若是想要實現更加複雜的插件，則須要在項目中更加深刻的去學習chart.js插件