如何在多系列高图中显示固定的工具提示位置?

如何在多系列高图中显示固定的工具提示位置?

问题描述:

我有多个系列的Highchart,我想在固定的位置显示工具提示。我根据这documentation跟着这个highcharts demo。不幸的是,根据我编写的配置代码,工具提示没有显示在固定位置。如何在多系列高图中显示固定的工具提示位置?

该图表的crosshair设置为true,并在沿x轴移动鼠标时显示y轴点(下面的截图)。 fixed tool tip

在上面的截图,我想显示工具提示CDT158:188.84和CDEP158:151.00绿色框(左上固定位置)。

这是我的示例配置代码

function plotChartData(dataSeries, xaxisTitle) 
{ 
    myChart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'chartSpace', 
      type: 'line', 
      zoomType: 'xy', 
      panning: true, 
      panKey: 'shift', 
      plotBorderWidth: 1, 
      events: { 
       dblclick: function (e) { 
        window.alert('Hello Chart!') 
       } 
      } 
     }, 
     title: { 
      text: 'Fixed Tooltip' 
     }, 
     legend: { 
      layout: 'horizontal', 
      align: 'left', 
      itemDistance: 10, 
      borderWidth: 0, 
      itemMarginTop: 0, 
      itemMarginBottom: 0, 
      padding: 20 
     }, 
     plotOptions: { 
      series: { 
       states: { 
        hover: { 
         enabled: false 
        } 
       }, 
       dataLabels: { 
        enabled: false, 
        format: '{y}' 
       }, 
       allowPointSelect: false 
      } 
     }, 
     xAxis: { 
      type: 'datetime', 
      labels: { 
       rotation: -65, 
       style: { 
        fontSize: '9px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      }, 
      crosshair: true 
     }, 
     yAxis: { 
      gridLineColor: '#DDDDDD', 
      gridLineWidth: 0.5 
     }, 
     tooltip: { 
      positioner: function() { 
       return { x: 80, y: 10 }; 
      }, 
      pointFormat: '{series.name}: <b>{point.y}</b><br/>', 
      split: true, 
      valueDecimals: 2, 
      shadow: false, 
      borderWidth: 0, 
      backgroundColor: 'rgba(255,255,255,0.8)' 
     }, 
     series: [{ 
      name: xaxisTitle, 
      data: dataSeries 
     }] 
    }); 
} 

我似乎无法找到任何解决方案在那里,类似于我的要求。我查看了Highcharts API文档,但是我很困惑要使用哪个属性或对象。

任何帮助,非常感谢。

分割工具提示会自动定位,所以这意味着定位器选项将不起作用。您可以使用共享工具提示来实现您想要的结果。

tooltip: { 
positioner: function() { 
    return { 
    x: this.chart.plotLeft, 
    y: this.chart.plotTop 
    }; 
}, 
shared: true, 
headerFormat: '', 
pointFormat: '{series.name}: <b>{point.y}</b><br/>', 

例如:http://jsfiddle.net/ydwLkyfe/1/

+0

感谢您的回答。所以,这就是'shared'属性的用法。你节省了我的一天。 – Juniuz