图表轴标签标题太长

时间:2013-06-08 18:04:49

标签: javascript highcharts

说,我有一个太长的轴标题,就像这里的那个:http://jsfiddle.net/KaZMr/
我想要实现的是截断那个长标题并在提示中显示它。我知道它可以简单地用以下内容截断:

//...
title: {
          text: 'Temperature (°C)'.substring(0, 10) + "..." 
       },
//...

但我如何应用提示呢?我知道可以使用this question中的svg元素来完成,但是highcharts似乎没有在title.text内正确解析这样的标记。
所以可能有人知道解决方法吗?

1 个答案:

答案 0 :(得分:3)

我认为有很多方法可以解决这个问题,所有这些都涉及使用标题的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;
}

然而,如果你必须使用如此长的标题,我不得不想知道你的图表会发生什么。不知道更多,乍一看,似乎你想要保持标题简短,并在图表附近的某处始终可见,或者至少可以通过其他方式显示描述性文本,而不是悬停/点击侧标题。


......侧面兴趣:
Is it possible to use jQuery .on and hover?

How to change the style of Title attribute inside the anchor tag?(如果您想尝试解决标题上的标记问题)