快捷導(dǎo)航

Angular?結(jié)合?dygraphs?實(shí)現(xiàn)?annotation功能

更新時(shí)間：2022年08月18日 11:41:52 作者：Jimmy

這篇文章主要介紹了Angular?結(jié)合?dygraphs?實(shí)現(xiàn)?annotation,本文，我們直接結(jié)合 Angular 來(lái)演示，如何通過(guò) dygraphs 實(shí)現(xiàn)折線圖上的 annotation 的功能，需要的朋友可以參考下

安裝依賴

package.json 中聲明以下的包以及版本。截止發(fā)文前，下面的包是最新的版本。

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

之后直接 npm install 即可。當(dāng)然，你可以直接通過(guò)命令行安裝這兩個(gè)包。

引入使用

import Dygraph from 'dygraphs';

因?yàn)槲覀兪且@取到相關(guān)的 Dom 節(jié)點(diǎn)，所以，我們需要在 ngAfterViewInit 鉤子函數(shù)中使用。

等到視圖渲染完之后，就可以獲取到 Dom 的節(jié)點(diǎn)了

完整的代碼如下：

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

      // 添加注釋
      g.ready(function() {
        g.setAnnotations([{
          series: 'Y1', // 指明哪條線
          x: '6', // 對(duì)應(yīng)的 x 軸的數(shù)值
          shortText: 'B', // annotation 的值
          width: 18, // annotation 矩形的寬
          height: 23, // annotation 矩形的高
        }, {
          series: 'Y1',
          x: '3',
          shortText: 'E',
          width: 18,
          height: 23,
        }])
      })
    }
}

上面是已知 annotation 的情況，那么，我們能不能實(shí)現(xiàn)點(diǎn)擊的時(shí)候，在我們選定的位置上添加 annotation 呢？

答案是肯定的。我們可以通過(guò) pointClickCallback 的回調(diào)方法來(lái)實(shí)現(xiàn)。一個(gè) demo，我們需要在 options 上添加下面的內(nèi)容：

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

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

到此這篇關(guān)于Angular 結(jié)合 dygraphs 實(shí)現(xiàn) annotation的文章就介紹到這了,更多相關(guān)Angular 實(shí)現(xiàn) annotation內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: