highcharts工具提示文本对齐

时间:2012-06-21 07:27:46

标签: tooltip highcharts text-align

我使用高级图表创建了一个图表。 工具提示在FF和IE中工作正常但在文本中文本不在框架中。

我尝试使用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;
    }

},

2 个答案:

答案 0 :(得分:4)

你到底需要什么?

例如,这会创建一个共享工具提示,其值与右对齐:

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;
            }
    },

DEMO:http://jsfiddle.net/babca/4NuTx/1/

答案 1 :(得分:3)

来自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
    },

Fiddle Here