如何对Highcharts区域图选中区域高亮显示

最近一直在研究SVG 恰好想起同事之前问过的一个问题 需求是给一个区域图部分高亮显示 高亮的区域由鼠标划过的坐标而定 其实也就是如何在一整块的SVG图形上显示不同的颜色 最后同事是用重新画图的方式解决的

在我看来 问题可能更为简单 Highcharts的区域图的<path>的d属性的值是有规律可循的 反映出这些点在屏幕上的坐标 所以我们只要找到我们想要区域的点 连接起来形成一个闭合图形 再给这一部分涂上颜色就可以了

最后显示出的效果如下图 具体实现过程可以在此处查看源码

Demo.png