Angular 结合 dygraphs 实现 annotation功能

目录

安装依赖

引入使用

图形库 dygraphs 不知道大家听说过了没有,是一个比较久远的库了,但是用起来还不错,主要是针对折线图这类的图形。

本文,我们直接结合 Angular 来演示,如何通过 dygraphs 实现折线图上的 annotation 的功能。如下图:

假设你学会了通过 angular-cli 来创建项目了。如果还没学会,读者可以通过官网或者本人往期的文章进行学习...

安装依赖

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,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 轴的数值 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内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    angular的scopel指令使用详解

    angular的scopel指令使用详解,angular,的,scopel,指令,使用,详解,我们,来,创建,,  我们来创建一个自定义指令    <!DOCTYPEhtml><ht

    angularJS的ng-bind-html指令详解

    angularJS的ng-bind-html指令详解,angularJS,的,ng-bind-html,指令,详解,angularjs,的,,  angularjs的强大之处之一就是他的数据双向绑

    AngularJS基础学习笔记之简单介绍

    AngularJS 不仅仅是一个类库,而是提供了一个完整的框架。它避免了您和多个类库交互,需要熟悉多套接口的繁琐工作。它由Google Chrome的开

    Angular之toDoList的实现代码示例

    本篇文章主要介绍了Angular之toDoList的实现代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧什么是t

    Angular单元测试之事件触发的实现

    这篇文章主要介绍了Angular单元测试之事件触发的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要

    angular 基于ng-messages的表单验证实例

    本篇文章主要介绍了angular 基于ng-messages的表单验证实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    如何在Angular.JS中接收并下载PDF

    最近这两天公司正在做一个PDF协议下载的功能,目前的解决方案可以分为完全前端生成和后端生成两种方式。前端生成PDF有jsPDF 和pdfmake 两