xAxis 标签和 useHTML #1 的问题答案

【问题标题】：Issues with xAxis labels and useHTML #1xAxis 标签和 useHTML #1 的问题
【发布时间】：2013-03-19 18:15:08
【问题描述】：

我遇到了 xAxis 标签和 useHTML 的问题：

我们将 xAxis 标签包装在一个带有 onclick 方法的 div 中，以调用另一个 JS 函数。这可以在这里看到...

但是，如果您单击 xAxis 标签，则不会发生任何事情...

为了解决这个问题，我将 useHTML 标志更改为 true，如此处所示...您会注意到现在 onclick 方法可以工作了。

useHTML:true

http://jsfiddle.net/yg2SF/2/

但是，现在标签不必要地环绕...您可以看到 xAxis 标签现在跨越 2 行。为什么会这样，我该如何解决？

【问题讨论】：

虽然我不知道为什么当 useHTML 为 true 时标签格式不能正常工作，但我知道如果我使用标签而不是
一切正常。这可以在这里演示...jsfiddle.net/yg2SF/6

标签： highcharts

【解决方案1】：

为内联标签设置样式宽度，请参阅：http://jsfiddle.net/yg2SF/8/

            formatter: function() {
                return '<div style="width:70px" onclick="alert(\''+this.value+'\')">'+this.value+'</div>';    
            }

对于您的评论：
<a> 标签被转换为 SVG，<div> 带有自定义 onclick 的标签不是。

【讨论】：

【解决方案2】：

Highchart 的默认行为是将标签值包装在 <tspan> 标记中的 <text> 标记内。这两个标签似乎都将“white-space: nowrap”作为默认浏览器行为，因此它们不会换行。

您的 jsFiddle 示例专门将空白设置为“正常”，这将允许文本在适当时换行。在连字符上换行是可以接受的，这样带有“Jan-2005”（等）的标签就会换行。如果您只是从样式块中删除“whiteSpace: 'normal'”元素，它们将不再换行。如果您真的想确保它们不换行，您甚至可以将其更改为“whiteSpace: 'nowrap'”。

此外，您在评论中链接的示例不使用 HTML，因此 Highchart 实际上剥离了您的 <a> 标记，但足以将您的 href="javascript:alert()" 代码转换为 onclick 事件<tspan>

【讨论】：