3

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

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

http://jsfiddle.net/yg2SF/1/

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

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

useHTML:true

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

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

4

2 回答 2

1

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

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

对您的评论：
<a>标签被翻译成 SVG，<div>带有自定义 onclick 的标签不是。

于 2013-06-19T10:48:03.650 回答
0

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

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

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

于 2013-06-18T20:45:54.413 回答