图表轴标签标题过长

Posted 2023-02-22

【中文标题】图表轴标签标题过长

【英文标题】：Too long chart axis label title

【发布时间】：2013-06-04 20:06:07

【问题描述】：

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

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

但是我怎样才能应用提示呢？我知道它可以使用svg 中的this question 元素来完成，但highcharts 似乎无法在title.text 中正确解析此类标记。 那么可能有人知道解决方法吗？

【参考方案1】：

我认为有很多方法可以解决这个问题，所有这些方法都涉及使用标题的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?（如果你想尝试用标题上的a标签解决问题）

【讨论】：

哇，useHTML 属性正是我想要的，我猜。谢谢！