html - 如何在 Chrome 检查器中检查 Highcharts 工具提示？

Question

我希望能够在 Chrome DOM 检查器中使用Protractor来定位 highcharts 工具提示，但我需要能够捕获 tolltip 的类名才能这样做。

当数据系列中的某个点悬停在 Highcharts 图表中时，会显示一个工具提示，如下所示：

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic/

我正在使用共享工具提示：

    tooltip: {
      shared: true,
    },

但是，使用检查器“强制元素状态：悬停”不起作用。我什至根本看不到工具提示在检查器中显示为 DOM 元素？

如何在 Chrome DOM 检查器中检查 Highcharts 工具提示？

标签： htmlgoogle-chromehighcharts

Answer 1

要在 Chrome DOM 检查器中检查 Highcharts 工具提示，您需要保持工具提示可见。您可以通过包装hide方法来实现它：

Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(proceed) {});

演示：https ://jsfiddle.net/BlackLabel/mke7Lh3b/

现在您可以轻松找到工具提示类（对于第一个系列中的要点）：

highcharts-label highcharts-tooltip         highcharts-color-0

highcharts-color-0这部分是动态添加的。该数字取决于默认 Highcharts 颜色数组系列中分配的颜色。

API：https ://api.highcharts.com/highcharts/colors