Angular?結(jié)合?dygraphs?實(shí)現(xiàn)?annotation功能
圖形庫 dygraphs
不知道大家聽說過了沒有,是一個(gè)比較久遠(yuǎn)的庫了,但是用起來還不錯(cuò),主要是針對(duì)折線圖這類的圖形。
本文,我們直接結(jié)合 Angular
來演示,如何通過 dygraphs
實(shí)現(xiàn)折線圖上的 annotation
的功能。如下圖:
假設(shè)你學(xué)會(huì)了通過
angular-cli
來創(chuàng)建項(xiàng)目了。如果還沒學(xué)會(huì),讀者可以通過官網(wǎng)或者本人往期的文章進(jìn)行學(xué)習(xí)...
安裝依賴
package.json
中聲明以下的包以及版本。截止發(fā)文前,下面的包是最新的版本。
"dependencies": { "dygraphs": "^2.1.16", }, "devDependencies": { "@types/dygraphs": "^2.1.4", }
之后直接 npm install
即可。當(dāng)然,你可以直接通過命令行安裝這兩個(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
呢?
答案是肯定的。我們可以通過 pointClickCallback
的回調(diào)方法來實(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Angular JS數(shù)據(jù)的雙向綁定詳解及實(shí)例
這篇文章主要介紹了Angular JS數(shù)據(jù)的雙向綁定詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-12-12Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能
這篇文章主要為大家詳細(xì)介紹了Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01Angular中$cacheFactory的作用和用法實(shí)例詳解
$cacheFactory是一個(gè)為Angular服務(wù)生產(chǎn)緩存對(duì)象的服務(wù)。接下來通過本文給大家介紹Angular中$cacheFactory的作用和用法實(shí)例詳解,非常不錯(cuò),感興趣的朋友一起看下吧2016-08-08微信+angularJS的SPA應(yīng)用中用router進(jìn)行頁面跳轉(zhuǎn),jssdk校驗(yàn)失敗問題解決
本文主要介紹微信+angularJS的SPA應(yīng)用中用router進(jìn)行頁面跳轉(zhuǎn),jssdk校驗(yàn)失敗問題解決,這里提供了詳細(xì)的操作方式,有需要的小伙伴可以參考下2016-09-09如何利用AngularJS打造一款簡單Web應(yīng)用
如果大家希望在應(yīng)用程序的創(chuàng)建工作中采取各類最佳實(shí)踐,那么AngularJS也能夠帶來極大的助益??偠灾@套框架的強(qiáng)大功能與特性永遠(yuǎn)不會(huì)讓有著應(yīng)用開發(fā)需求的朋友們失望2015-12-12Angularjs注入攔截器實(shí)現(xiàn)Loading效果
angularjs作為一個(gè)全ajax的框架,對(duì)于請(qǐng)求,如果頁面上不做任何操作的話,在結(jié)果反回來之前,頁面是沒有任何響應(yīng)的,不像普通的HTTP請(qǐng)求,會(huì)有進(jìn)度條之類2015-12-12Angular 4.x中表單Reactive Forms詳解
這篇文章主要介紹了Angular 4.x中表單Reactive Forms的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),相信對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-04-04