Highcharts｜How to using Angular to synchronize multiple chart

scenario

Highcharts 做為一家專業圖表視覺化工具，在巨量資料的呈現，以及效能的表現，可算是佼佼者，並且在圖表上的視覺設定，或是需要客製化的部份，都有很多可以調整的設定，並在社群上可以找到大量的範例，不論是官方或是使用者，讓新進的使用者可以較快上手 Highcharts 的使用。

此次的範例為使用 Angular，並套用 HIghcharts 的方式建立多個 Charts ，可以讓數值進行同步顯示。

安裝 Highcharts

npm install highcharts highcharts-angular

在 Module 中加入 Highcharts 模組

import { HighchartsChartModule } from 'highcharts-angular'; 
@NgModule({ 
imports: [ 
... HighchartsChartModule

在 Component 中加入 Highcharts 套件

import * as Highcharts from 'highcharts';

建立 Highcharts Components

透過 ngFor 將多個 Chart Config 進行迴圈，呈現多組 Charts，並在最外層包一個 synchronizeTooltips 處理同步事件。

<div (mousemove)="synchronizeTooltips($event)">
  <highcharts-chart [Highcharts]="Highcharts" style="width: 100%;display:
  block;margin:10px 0;" [options]="chartOption" *ngFor="let chartOption of
  chartOptions">
</highcharts-chart>
</div>

在 component 中將 Highcharts 實體化，並實作 synchronizeTooltips 的事件。

export class SyncHighchartComponent implements OnInit {
  Highcharts: typeof Highcharts = Highcharts;
  @Input() public chartOptions: Array = [];

  constructor() { }

  synchronizeTooltips = e => {

    for (let i = 0; i < Highcharts.charts.length; ++i) {
      if (!Highcharts.charts[i]) continue;
      let chart = Highcharts.charts[i];

      let event = chart.pointer.normalize((e as (MouseEvent | PointerEvent | TouchEvent)));
      let point = undefined;
      for (let j = 0; j < chart.series.length && !point; ++j) {
        point = chart.series[j].searchPoint(event, true);
      }

      if (!point) return;

      if (e.type === "mousemove") {
        point.onMouseOver();
        // console.log(chart.xAxis[0]);
        chart.xAxis[0].drawCrosshair(event, point);
      } else {
        point.onMouseOut();
        chart.tooltip.hide(point);
        chart.xAxis[0].hideCrosshair();
      }
    }
  };

  ngOnInit(): void {
  }

}

取用 Highcharts Component 在其他應用

套用上面建立的 highcharts component，selector 為 app-sync-highchart，並將整理好的 chart config list 指給 input 參數。

<app-sync-highchart [chartOptions]="shortSeriesChartOption"></app-sync-highchart>

接著在程式中，整理好需要的設定值，像是 title、xAxis type、tooltip 等等的格式或樣式。

              {
                chart: {
                  height: 200,
                  zoomType: 'x',
                  marginLeft: 40, // Keep all charts left aligned
                  spacingTop: 20,
                  spacingBottom: 20,
                  className: "chart-short"
                },
                loading: {
                  hideDuration: 1000,
                  showDuration: 1000
                },
                title: {
                  text: 'CPU',
                  align: 'left',
                  margin: 0,
                  x: 30,
                  style: {
                    fontSize: '18px'
                  }
                },
                credits: {
                  enabled: false
                },
                legend: {
                  enabled: false
                },
                plotOptions: {
                  series: {
                    stacking: 'normal',
                    states: {
                      inactive: {
                        opacity: 1
                      }
                    },
                  },
                  areaspline: {
                    fillOpacity: 0.5
                  }
                },
                xAxis: {
                  crosshair: true,
                  events: {
                    setExtremes: function (e) {
                      var thisChart = this.chart;

                      if (e.trigger !== "syncExtremes") {
                        // Prevent feedback loop
                        Highcharts.each(Highcharts.charts, function (chart) {

                          if (!chart) {
                            return;
                          }


                          if (chart !== thisChart && chart.options.chart.className === thisChart.options.chart.className) {
                            if (!chart) return;
                            if (chart.xAxis[0].setExtremes) {
                              // It is null while updating
                              chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
                                trigger: "syncExtremes"
                              });
                            }
                          }
                        });
                      }
                    }
                  },
                  labels: {
                    format: '{value:%m-%d}'
                  },
                  type: "datetime"
                },
                yAxis: {
                  title: {
                    text: null
                  }
                },
                tooltip: {
                  shared: true,
                  positioner: function () {
                    return {
                      x: this.chart.chartWidth - 200, // right aligned
                      y: 10 // align to title
                    };
                  },
                  borderWidth: 0,
                  backgroundColor: 'none',
                  pointFormat: '{series.name}: {point.y}',
                  headerFormat: '',
                  shadow: false,
                  style: {
                    fontSize: '12px'
                  },
                  valueDecimals: 2,
                  valueSuffix: '%',
                },
                series: series
              }

最重要是將資料放入到 series 設定中，也可以同步設定透明度、顏色、chart type 等等。

[
  {
    "name": "bytes_recv",
    "type": "areaspline",
    "fillOpacity": 0.3,
    "data": [
      [
        1659715260000,
        0.08
      ],
      [
        1659715320000,
        0.04
      ],
      [
        1659715380000,
        0.04
      ]
    ],
    "color": "#FAA50C"
  },
  {
    "name": "bytes_sent",
    "type": "areaspline",
    "fillOpacity": 0.3,
    "data": [
      [
        1659715260000,
        0
      ],
      [
        1659715320000,
        0
      ],
      [
        1659715380000,
        0
      ]
    ],
    "color": "#AB4BEB"
  }
]

呈現結果