dygraphs 这个图形库，可能有些读者不太熟悉——它其实是个老牌工具了，专注折线图这类场景，用起来依然顺手。今天咱们直接结合 Angular 来演示，如何利用 dygraphs 在折线图上实现 annotation（注释标注）功能。效果大概是这样：
默认你已经会用
angular-cli创建项目了，如果还没到这一步，可以先去官网或相关教程补一下基础。
安装必要依赖包
在 package.json 里声明以下依赖，截至目前这些是最新稳定版本：
"dependencies": {
"dygraphs": "^2.1.16",
},
"devDependencies": {
"@types/dygraphs": "^2.1.4",
}
然后直接执行 npm install 即可。当然，你也通过命令行分别安装这两个包，更加省事。
在Angular中引入并使用dygraphs
import Dygraph from 'dygraphs';
由于需要获取 DOM 节点，必须将初始化代码放在 ngAfterViewInit 生命周期钩子里——等到视图渲染完毕，DOM 元素才能真正可用。
视图渲染完成后才能拿到 DOM 节点，这是 Angular 开发中常见的时机点。
完整的示例代码如下：
ngAfterViewInit() {
let that = this;
if(this.chartRef) {
const g = new Dygraph(
this.chartRef.nativeElement, // 渲染的 dom 节点
"X,Y1,Y2,Y3n" +
"1,2,3,4n" +
"8,7,9,5n" +
"3,9,5,7n" +
"6,7,8,6n",
{ // 相关的 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 回调方法就能轻松实现。你只需在 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 注释标注功能的基本用法。关键步骤包括：安装依赖包、在 ngAfterViewInit 中初始化图表、通过 setAnnotations 方法添加静态注释或利用点击回调动态插入注释。如果需要更复杂的交互，例如鼠标悬停高亮时的操作，也可以基于 highlightCallback 继续扩展，实现更丰富的折线图注释体验。
