Question

Highcharts - 根据Plotband改变共享的工具提示对我来说有点挑战。

series: [{
        name : 'one',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },{
        name : 'two',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },{
        name : 'three',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]

plotName : {'first','second','third'}
plotFrom : {'0','50','100'}
plotTo : {'49','99','149'}

条件：

1. On hovering over plotband - "first" tooltip should show value for series "one"
2. On hovering over plotband - "second" tooltip should show value for series "one" & "two"
3. On hovering over plotband - "third" tooltip should show value for series "one","two" & "three"

非常感谢您的时间和帮助。

我的代码：

工具提示部分：

tooltip:{
    shared:true,
    shadow: false,
    useHTML: true,
    backgroundColor: 'white',

    formatter: function() {
        var s = '<table><tr  style="font-size:10px; font-face:verdana;"><td>Date: </td><td>'+ this.x +'</td></tr>';

        $.each(this.points, function(i, point) {
            += '<tr style="font-face:verdana; font-size:10px; color:'+point.series.color+'"><td>'+ point.series.name +'</td><td>: '+point.y+'</td></tr>';                   
        });
        s += '</table>';
        return s;
    }
},

Plotband部分：

for(var i=0;i<plotName.length;i++) {
    chart.xAxis[0].addPlotBand({
        color: band_Colors[i],
        from: plotFrom[i],
        to: plotTo[i],
        label : {
            useHTML: true,
            text : plotVersion[i],
            style : {
                fontFamily : 'verdana'
            }
        }
    });
}

任何人都可以帮助我。在此先感谢。

Answer 1

您可以在工具提示格式化程序中使用绘图带的x值。如果您在特定的plotBand内（因此在特定的x范围内），您可以显示一个，两个或三个系列：

  $('#container').highcharts({
    xAxis: {
      plotBands: [{
        name: 'first',
        from: 0,
        to: 3,
        color: 'rgba(200,0,0,0.5)',
        zIndex: 2
      }, {
        name: 'second',
        from: 3,
        to: 6,
        color: 'rgba(0,200,0,0.5)',
        zIndex: 2
      }, {
        name: 'third',
        from: 6,
        to: 11,
        color: 'rgba(0,0,200,0.5)',
        zIndex: 2
      }]
    },
    tooltip: {
      shared: true,
      formatter: function() {
        var x = this.x,
          points = this.points,
          newArr,
          tooltipNew = this,
          tooltip = this.points[0].series.chart.tooltip,
          text;


        if (x <= 3) {
          tooltip.shared = false;
          tooltipNew = points[0];
        } else if (x <= 6) {
          newArr = [];
          newArr.push(points[0]);
          newArr.push(points[1]);
          tooltipNew.points = newArr;
        }
        text = tooltip.defaultFormatter.call(tooltipNew, tooltip);
        tooltip.shared = true;
        return text;
      }
    },
    series: [{
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }]
  });

在这里你可以看到一个如何工作的例子： http://jsfiddle.net/1w9hppvu/1/

Highcharts共享工具提示（适用于系列） - 在悬停时更改为PLOTBAND

1 个答案: