2013-07-16 198 views
2

我使用高圖表,但遇到了較大的工具提示裁剪在SVG外部元素的問題,如下圖所示。Highcharts工具提示剪裁

enter image description here

選項useHTML設置爲true,工具提示和x軸,爲我申請了一些自定義CSS這些元素。

有沒有辦法讓工具提示不要裁剪?

我highcharts代碼如下所示:提前

 return { 
     chart: { 
      renderTo: this._chartContainer, 
      type: 'columnrange', 
      inverted: true 
     }, 
     title: { 
      text: this._getTitle(values) 
     }, 
     xAxis: { 
      categories: values.rows.labels[0], 
      labels: { 
       formatter: function() { 
        return '<span class="xAxisTruncate" title="' + this.value + '">'+ this.value +'</span>'; 
       }, 
       useHTML: true 
      } 
     }, 
     yAxis: { 
      max: this._getMax(), 
      min: this._getMin(), 
      gridLineWidth: 2, 
      opposite: true, 
      tickInterval: 31 * 24 * 3600 * 1000, 
      type: 'datetime', 
      dateTimeLabelFormats: { 
       month: '%b %y' 
      }, 
      title: { 
       text: yAxisTitleText 
      }, 
      endOnTick: false, 
      labels: { 
       align: 'left' 
      } 
     }, 
     plotOptions: { 
      series: { 
       borderWidth: 0, 
       borderColor: 'transparent', 
       borderRadius: 5, 
       groupPadding: 0.05 
      }, 
      columnrange: { 
       dataLabels: { 
        enabled: true 
       }, 
       animation: false, 
       colorByPoint: false 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     series: columnRangeSeries, 
     tooltip: { 
      enabled: true, 
      useHTML: true, 
      formatter: function(){ 
       return this.point.toolTip; 
      } 
     } 
    }; 

感謝。

回答

5

我很確定,類似的話題存在堆棧,但我找不到它。一般來說,是可能實現使用HTML工具提示,請參閱:http://jsfiddle.net/7wVDV/147/

CSS:

.highcharts-container { 
    overflow: visible !important; 
} 
.MyChartTooltip { 
    position: relative; 
    z-index: 50; 
    border: 2px solid rgb(0, 108, 169); 
    border-radius: 5px; 
    background-color: #ffffff; 
    padding: 5px; 
    font-size: 9pt; 
} 
+0

你真棒,不知道highcharts仍然使用SVG形狀工具提示的背景下,即使'useHTML'是在閱讀你的代碼之前,請閱讀'ture',謝謝:) – Reorx