Question

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

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

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

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

useHTML:true

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

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

Answer 1

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

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

发表评论：
<a>标记已转换为SVG，<div>标记未使用自定义onclick。

Answer 2

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

你的jsFiddle示例是专门将white-space设置为“normal”，这将允许在适当的时候进行文本换行。在连字符上包装文本是可以接受的，因此带有“Jan-2005”（等）的标签将会换行。如果你只是从样式块中删除“whiteSpace：'normal'，”元素，它们就不再包装了。如果你真的想确保它们不包装你甚至可以改变它“whiteSpace：'nowrap'，”。

此外，您在评论中链接的示例不使用HTML，因此Highchart实际上剥离了您的<a>代码，但足以将您的href =“javascript：alert（）”代码转换为onclick事件对于<tspan>

xAxis标签和useHTML＃1的问题

2 个答案: