Highcharts出于安全考虑，默认会过滤掉tooltip中HTML内容里潜在风险的属性，例如onclick。这导致在tooltip中嵌入的链接和按钮的点击事件无法触发。本文将详细介绍如何通过修改Highcharts.AST.allowedAttributes来解除这一限制，从而在Highcharts tooltip中实现可点击的链接和按钮等交互式元素，并提供相应的配置示例和注意事项。

Highcharts Tooltip交互性失效的根源

Highcharts在渲染图表时，为了防止跨站脚本攻击（XSS），会对通过配置选项（如tooltip.formatter返回的HTML字符串）注入的HTML内容进行严格的安全过滤。这意味着即使您在tooltip配置中设置了useHTML: true以允许使用自定义HTML，某些被视为潜在风险的HTML属性（例如onclick、onerror等）仍然会被默认移除。因此，当您尝试在tooltip中放置一个带有onclick事件的按钮或一个包含onclick属性的链接时，这些事件将无法触发，因为相应的属性在渲染前已被过滤掉。

此外，为了确保tooltip中的交互元素能够响应鼠标事件，tooltip.style中必须包含pointerEvents: ‘auto’。如果缺少此样式，即使属性未被过滤，鼠标事件也可能无法正确传递到tooltip内部的元素。

以下是一个典型的、在默认配置下无法工作的tooltip配置示例：

tooltip: {     useHTML: true,     style: {       pointerEvents: 'auto' // 确保鼠标事件能穿透     },     formatter: function() {         return '<div>' + this.x + ': ' + this.y +                '<br><a href="https://www.google.com">点击我 (链接)</a>' +                '<br><button onclick="globalClicked()" >你好 (按钮)</button></div>';     } } // 假设 globalClicked() 是一个全局函数 function globalClicked() {     alert('按钮被点击了！'); }

在上述代码中，尽管useHTML和pointerEvents都已设置，但onclick属性仍会被Highcharts的安全机制移除，导致按钮点击事件失效。

解决方案：扩展允许的HTML属性

要解决Highcharts tooltip中交互元素（如带有onclick的按钮或链接）无法工作的问题，我们需要显式地告诉Highcharts允许使用这些被默认过滤的属性。这可以通过修改Highcharts.AST.allowedAttributes数组来实现。Highcharts.AST是Highcharts内部用于处理抽象语法树（Abstract Syntax Tree）的工具，allowedAttributes数组中包含了Highcharts允许在HTML内容中使用的所有属性。

核心解决方案代码如下：

百度文心百中

百度大模型语义搜索体验中心

32

查看详情

Highcharts.AST.allowedAttributes.push('onclick'); // 如果还需要允许其他属性，可以继续添加，例如： // Highcharts.AST.allowedAttributes.push('onmouseover'); // Highcharts.AST.allowedAttributes.push('data-custom-attr');

将这行代码添加到您的Highcharts配置之前（例如，在Highcharts库加载之后，图表实例化之前），即可解除对onclick属性的过滤。

实现可点击的链接和按钮

在添加了上述配置后，您就可以在tooltip.formatter中自由地使用带有onclick属性的HTML元素了。

示例：可点击链接

一个带有href属性的链接通常不会被allowedAttributes过滤，因为href是标准且安全的属性。但如果链接也需要onclick行为，则需确保onclick已被允许。

// 1. 确保在Highcharts初始化之前添加此行 Highcharts.AST.allowedAttributes.push('onclick');  // 2. Highcharts配置 Highcharts.chart('container', {     // ... 其他图表配置 ...     tooltip: {         useHTML: true,         style: {             pointerEvents: 'auto'         },         formatter: function() {             return '<div>' + this.x + ': ' + this.y +                    '<br><a href="https://www.google.com" target="_blank" onclick="linkClicked('' + this.x + '')">查看详情 (' + this.x + ')</a></div>';         }     },     // ... 数据系列等 ... });  // 3. 定义全局函数，供onclick调用 function linkClicked(category) {     alert('您点击了与 ' + category + ' 相关的链接！');     // 可以在这里执行页面跳转、数据加载等操作 }

示例：可点击按钮

在tooltip中嵌入带有onclick事件的按钮是常见的需求。

// 1. 确保在Highcharts初始化之前添加此行 Highcharts.AST.allowedAttributes.push('onclick');  // 2. Highcharts配置 Highcharts.chart('container', {     // ... 其他图表配置 ...     tooltip: {         useHTML: true,         style: {             pointerEvents: 'auto'         },         formatter: function() {             return '<div>' + this.x + ': ' + this.y +                    '<br><button onclick="buttonAction('' + this.x + '', ' + this.y + ')">执行操作</button></div>';         }     },     // ... 数据系列等 ... });  // 3. 定义全局函数，供onclick调用 function buttonAction(xValue, yValue) {     alert('您点击了按钮！数据点：X=' + xValue + ', Y=' + yValue);     // 可以在这里触发复杂业务逻辑 }

重要注意事项

1. 安全考量 (XSS风险)： 修改Highcharts.AST.allowedAttributes会降低Highcharts默认的安全防护级别。在允许onclick等属性后，如果您的tooltip.formatter内容来源于用户输入或不可信的数据源，则存在跨站脚本攻击（XSS）的风险。恶意用户可能会注入包含恶意JavaScript代码的onclick属性，从而窃取用户信息或执行其他恶意操作。因此，请务必谨慎使用此功能，并确保您注入到tooltip中的HTML内容是安全可信的。

2. pointerEvents: ‘auto’ 的必要性： 如前所述，tooltip.style中设置pointerEvents: ‘auto’是确保鼠标事件能够被tooltip内部元素捕获的关键。如果缺少此样式，即使onclick属性被允许，点击事件也可能无法触发。

3. onclick中函数的全局可访问性： 在tooltip.formatter中通过onclick=”myFunction()”调用的JavaScript函数必须在全局作用域中可访问，或者通过其他方式（例如，将函数绑定到window对象）使其可访问。如果函数未定义或不可访问，点击事件将不会有任何效果。

4. 替代方案： 如果可能，考虑使用Highcharts自身的事件处理机制来避免直接在HTML中嵌入JavaScript。例如，您可以通过chart.events.click或plotOptions.series.point.events.click来捕获图表或数据点的点击事件，然后根据点击的坐标或数据点信息来判断是否需要执行特定操作，而不是在tooltip内部处理点击事件。这种方法通常更安全，也更容易管理。

5. 其他被过滤属性： 除了onclick，Highcharts可能还会过滤其他HTML属性。如果您的应用场景需要使用其他被过滤的属性，您也需要按照相同的方式将其添加到Highcharts.AST.allowedAttributes数组中。

总结

Highcharts出于安全考虑，默认会过滤掉tooltip中HTML内容里的某些潜在风险属性，如onclick，这导致了交互式元素无法正常工作。解决此问题的核心在于通过Highcharts.AST.allowedAttributes.push(‘onclick’)显式地允许这些属性，并确保tooltip.style中包含pointerEvents: ‘auto’。在实现这一功能时，务必充分考虑安全风险，并优先使用Highcharts提供的事件处理机制，以在功能实现和安全防护之间取得平衡。