dev*_*ter 3 text-align tooltip highcharts
我使用高图表创建了一个图表。工具提示在 FF 和 IE 中工作正常,但在 chorme 中,文本超出了框架。
我尝试使用 HTML
tooltip:
{
//Tried this also
/* formatter: function()
{
return '' + Highcharts.dateFormat('%H:%M:%S', this.x) +'; '+ this.y;
}, */
useHTML: true,
formatter: function() {
var html="<div style='width:140px;text-align:center; direction:ltr'>"+
Highcharts.dateFormat('%H:%M:%S', this.x) +'; '+ this.y+
"</div>";
return html;
}
},
Run Code Online (Sandbox Code Playgroud)
小智 6
来自 Highcharts.com 的回答:
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<small>{point.key}</small><table>',
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right"><b>{point.y} EUR</b></td></tr>',
footerFormat: '</table>',
valueDecimals: 2
},
Run Code Online (Sandbox Code Playgroud)
你究竟需要什么?
例如,这将创建一个共享工具提示,其值向右对齐:
tooltip: {
shared: true,
useHTML: true,
formatter: function()
{
tooltip_html = Highcharts.dateFormat('%H:%M:%S', this.x * 1000);
tooltip_html += "<table>";
this.points.forEach(function(entry)
{
tooltip_html += '<tr><td style="font-weight:bold; color:'+ entry.series.color +'">'+ entry.series.name +':</td><td style="text-align: right"> '+entry.y+'</td></tr>';
});
tooltip_html += "</table>";
return tooltip_html;
}
},
Run Code Online (Sandbox Code Playgroud)
演示:http : //jsfiddle.net/babca/4NuTx/1/