我认为有很多方法可以解决这个问题,所有这些方法都涉及使用useHTML
标题的属性。
http://api.highcharts.com/highcharts#title.useHTML
这是一个快速而肮脏的实现作为起点。
http://jsfiddle.net/qeQQn/
HTML
<div id="wrapper">
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
<div id="divCT"><strong>Long Text Message</strong><br />
This is such a big axis title that it cannot be fully displayed and overlaps everything. So loooooooooooooooooooooooooooooooooooooong</div>
</div>
一些JavaScript:
yAxis: {
title: {
useHTML: true,
text: '<span id="highCT">Long Text Message</span>'
},
...
$("#highCT").on(
{
mouseenter: function() {
$("#divCT").show();
},
mouseleave: function() {
$("#divCT").hide();
}
}
);
CSS
#wrapper {
position: relative;
margin: 0;
padding: 0;
}
#highCT {
text-decoration: none;
}
#divCT {
position: absolute;
top: 100px;
left: 40px;
width: 300px;
display: none;
z-index: 20000;
background-color: #000;
color: #FFF;
font: 10pt Arial, sans-serif;
padding: 10px;
}
但是,如果您必须使用这么长的标题,我不得不想知道您的图表发生了什么。在不了解更多信息的情况下,乍一看,您似乎希望保持标题简短,并在图表附近的某处添加始终可见的描述性文本,或者至少通过悬停/单击侧面标题以外的其他方式可见。
...的兴趣:
是否可以使用 jQuery .on 和悬停?
如何更改锚标签内 Title 属性的样式?(如果您想尝试使用标题上的标签来解决问题)