2012-06-21 5 views
1

높은 차트를 사용하여 그래프를 만들었습니다. 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; 
    } 

}, 
+0

이 오른쪽으로 정렬 된 값을 공유 툴팁 작성 내 [example] (http://jsfiddle.net/3bQne/80/) t 업그레이드 문제가 재현 되나요? –

답변

2

정확히 당신이 필요로하는 무엇을?

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 : Highcharts.com에서 http://jsfiddle.net/babca/4NuTx/1/

3

않음 :

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

관련 문제