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 回答