如何使用Angular与dygraphs整合实现数据注释功能？

本文共计764个文字，预计阅读时间需要4分钟。

目录 + 安装依赖 + 引入使用 + 图形库 + dygraphs + 虽然不知道大家是否听说过，但这是一个相对较老的库了。虽然使用起来还是不错的，主要针对折线图等这类图形展示。 + 本文档，我们将直接结合Angular来演示。

目录

• 安装依赖
• 引入使用

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

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

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

安装依赖

package.json 中声明以下的包以及版本。截止发文前，下面的包是最新的版本。

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

之后直接 npm install 即可。当然，你可以直接通过命令行安装这两个包。