Angular?結(jié)合?dygraphs?實現(xiàn)?annotation功能
圖形庫 dygraphs 不知道大家聽說過了沒有，是一個比較久遠的庫了，但是用起來還不錯，主要是針對折線圖這類的圖形。
本文，我們直接結(jié)合 Angular 來演示，如何通過 dygraphs 實現(xiàn)折線圖上的 annotation 的功能。如下圖：
假設你學會了通過
angular-cli來創(chuàng)建項目了。如果還沒學會，讀者可以通過官網(wǎng)或者本人往期的文章進行學習...
安裝依賴
package.json 中聲明以下的包以及版本。截止發(fā)文前，下面的包是最新的版本。
"dependencies": {
"dygraphs": "^2.1.16",
},
"devDependencies": {
"@types/dygraphs": "^2.1.4",
}之后直接 npm install 即可。當然，你可以直接通過命令行安裝這兩個包。
引入使用
import Dygraph from 'dygraphs';
因為我們是要獲取到相關的 Dom 節(jié)點，所以，我們需要在 ngAfterViewInit 鉤子函數(shù)中使用。
等到視圖渲染完之后，就可以獲取到
Dom的節(jié)點了
完整的代碼如下：
ngAfterViewInit() {
let that = this;
if(this.chartRef) {
const g = new Dygraph(
this.chartRef.nativeElement, // 渲染的 dom 節(jié)點
"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",
{ // 相關的 options 的選項
highlightSeriesOpts: { // 高光某一條折線
strokeWidth: 3, // 高光的寬度
strokeBorderWidth: 1, // 高光的邊框的寬度
highlightCircleSize: 5, // 高光的原點的大小
},
}
);
// 添加注釋
g.ready(function() {
g.setAnnotations([{
series: 'Y1', // 指明哪條線
x: '6', // 對應的 x 軸的數(shù)值
shortText: 'B', // annotation 的值
width: 18, // annotation 矩形的寬
height: 23, // annotation 矩形的高
}, {
series: 'Y1',
x: '3',
shortText: 'E',
width: 18,
height: 23,
}])
})
}
}上面是已知 annotation 的情況，那么，我們能不能實現(xiàn)點擊的時候，在我們選定的位置上添加 annotation 呢？
答案是肯定的。我們可以通過 pointClickCallback 的回調(diào)方法來實現(xiàn)。一個 demo，我們需要在 options 上添加下面的內(nèi)容：
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 結(jié)合 dygraphs 實現(xiàn) annotation的文章就介紹到這了,更多相關Angular 實現(xiàn) annotation內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
AngularJs ng-repeat 嵌套如何獲取外層$index
AngularJS利用Controller完成URL跳轉(zhuǎn)
在JavaScript的AngularJS庫中進行單元測試的方法