Angular 結合 dygraphs 實現 annotation功能

2022-08-18 14:00:28

安裝依賴

package.json 中宣告以下的包以及版本。截止發文前，下面的包是最新的版本。

"dependencies": {
  "dygraphs": "^2.1.16",
},
"devDependencies": {
  "@types/dygraphs": "^2.1.4",
}

之後直接 npm install 即可。當然，你可以直接通過命令列安裝這兩個包。

引入使用

import Dygraph from 'dygraphs';

因為我們是要獲取到相關的 Dom 節點，所以，我們需要在 ngAfterViewInit 勾點函數中使用。

等到檢視渲染完之後，就可以獲取到 Dom 的節點了

完整的程式碼如下：

ngAfterViewInit() {
  let that = this;
  if(this.chartRef) {
     const g = new Dygraph(
        this.chartRef.nativeElement,  // 渲染的 dom 節點
        "X,Y1,Y2,Y3n" +
        "1,2,3,4n" +
        "8,7,9,5n" +
        "3,9,5,7n" +
        "6,7,8,6n",
        {  // 相關的 options 的選項
          highlightSeriesOpts: { // 高光某一條折線
            strokeWidth: 3, // 高光的寬度
            strokeBorderWidth: 1, // 高光的邊框的寬度
            highlightCircleSize: 5, // 高光的原點的大小
          },
        }
      );

      // 新增註釋
      g.ready(function() {
        g.setAnnotations([{
          series: 'Y1', // 指明哪條線
          x: '6', // 對應的 x 軸的數值
          shortText: 'B', // annotation 的值
          width: 18, // annotation 矩形的寬
          height: 23, // annotation 矩形的高
        }, {
          series: 'Y1',
          x: '3',
          shortText: 'E',
          width: 18,
          height: 23,
        }])
      })
    }
}

上面是已知 annotation 的情況，那麼，我們能不能實現點選的時候，在我們選定的位置上新增 annotation 呢？

答案是肯定的。我們可以通過 pointClickCallback 的回撥方法來實現。一個 demo，我們需要在 options 上新增下面的內容：

pointClickCallback(e, point) { // 針對點點選，返回的 x 是所有點的集合
  that.arr.push({
    series: point.name,
    x: point.xval,
    shortText: 'A',
    width: 18,
    height: 23,
  });
  
  g.setAnnotations(that.arr);
}

// 不錯哦，我們也可以在高量的時候進行操作
highlightCallback(event, x, points, row, seriesName) {
  // 讀者可以自行思考完成
}

到此這篇關於Angular 結合 dygraphs 實現 annotation的文章就介紹到這了,更多相關Angular 實現 annotation內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Angular 結合 dygraphs 實現 annotation功能

目錄

安裝依賴

引入使用

熱門文章