Highcharts geteilter Tooltip (für Zeilenreihen) - Änderung beim Schweben NACH PLOTBAND

Question

Highcharts - Es ist eine kleine Herausforderung für mich, den geteilten Tooltip entsprechend dem Plotband zu ändern.

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'} 

Zustand:

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" 

wirklich zu schätzen Ihre Zeit und Hilfe.

Mein Code:

Tooltip Teil:

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 Teil:

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' 
      } 
     } 
    }); 
} 

Kann jemand bitte helfen Sie mir. Danke im Voraus.

Answer 1

Sie können x-Werte Ihrer Plotbands im Tooltip-Formatierer verwenden. Wenn Sie in bestimmten plotBand (so in bestimmten x Bereiche) sind, können Sie eine, zwei oder drei Serien an:

$('#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] 
    }] 
    }); 

Hier sehen Sie ein Beispiel sehen, wie es funktionieren kann: http://jsfiddle.net/1w9hppvu/1/