highcharts - 使文本适应高图工具提示最大宽度

Question

我想垂直调整我的highcharts工具提示中的文本（定义了最大宽度，所以如果文本不适合这个最大宽度，请增加工具提示高度以适应文本）

什么适用于简单的 HTML 内容...

#my_div
{
   height:auto;
   max-width:140px;
   overflow:auto
}

不适用于 highcharts 工具提示，请参阅http://jsfiddle.net/perikut/hNCDb/2/

Answer 1

默认white-space设置nowrap，您应该将其更改为normal.

.highcharts-tooltip span {
    height:auto;
    width:140px;
    background-color:green;
    overflow:auto;
    white-space:normal !important; // add this line...
}

演示

Answer 2

如果您只想更改white-space单个图表的工具提示行为和/或单独控制每个图表的样式，您可以使用以下方法：

 tooltip: {
    useHTML: true,
    formatter: function() {
        return "<div style='width: 400px; white-space:normal;'>" + this.points[0].point.yourDataPointValue + "</div>";
    }  
 }

演示

请注意，如果您想为多个工具提示重用相同的样式，您可以/应该使用类名而不是内联样式。

Answer 3

只需将其添加到图表选项中：

tooltip:{
    shared: false,
    useHTML: true
}

然后将以下内容添加到您的 CSS 中：

.highcharts-tooltip span {
    height:auto !important;
    width:140px !important;
    max-width:140px !important;
    overflow:auto !important;
    white-space:normal !important; 
}

你已准备好出发！;-)