Zusätzliche Tooltip in Highcharts mit Lenker

Question

Ich habe ein Highcharts-Diagramm, das sowohl Spalten- als auch Spline-Graphen enthält. Die Datensätze werden mit Lenkervariablen übergeben. Der Code ist wie dieser

$(function() { 
$('#container').highcharts({ 
    title: { 
     text: '', 
     style: { 
      color: '#cc0000', 
      fontWeight: 'bold' 
     } 
    }, 
    xAxis: { 
     categories: [{{{xaxisLabel}}}] 
    }, 
    yAxis: [{ /* Primary yAxis */ 
     labels: { 
      format: '{value}%', 
      style: { 
       color: '#cc0000' 
      } 
     }, 
     title: { 
      text: 'Failure Percentage', 
      style: { 
       color: '#cc0000' 
      } 
     } 
    }, { /* Secondary yAxis */ 
     title: { 
      text: 'Success Percentage', 
      style: { 
       color: '#009900' 
      } 
     }, 
     max: 100, 
     labels: { 
      format: '{value} %', 
      style: { 
       color: '#009900' 
      } 
     }, 
     opposite: true 
    }], 
    labels: { 
     items: [{ 
      html: '', 
      style: { 
       left: '2px', 
       top: '18px', 
       color: (Highcharts.theme && Highcharts.theme.textColor) || 'black' 
      } 
     }] 
    }, 
    credits: { 
     enabled: false 
    }, 
    series: [{ 
     type: 'column', 
     name: 'Success', 
     color: Highcharts.getOptions().colors[2], 
     yAxis: 1, 
     tooltip: { 
      valueSuffix: ' %' 
     }, 
     data: [{{barSuccess}}] 
    }, { 
     type: 'spline', 
     name: 'Failure', 
     tooltip: { 
      valueSuffix: ' %' 
     }, 
     data: [{{barFailure}}], 
     marker: { 
      lineWidth: 3, 
      lineColor: Highcharts.getOptions().colors[8], 
      fillColor: 'red' 
     } 
    }] 
}); 
}); 

Jetzt habe ich zwei weitere Datensätze genannt als {{toolTipSuccess}} und {{toolTipFailure}}.

{{toolTipSuccess}} geht in das Säulendiagramm und {{toolTipFailure}} in das Spline-Diagramm.

Ich möchte, dass die Daten in diesen beiden Datasets als Tooltip in die entsprechenden Grafiken kommen. Ich weiß, dass dies getan werden kann, wenn ich die Daten im Format (x, y, z) in der Grafik übergebe, aber ich muss viel Code ändern, um das zu berücksichtigen, was ich vermeide.

Kennt jemand Kreisverkehr zu diesem Problem?

Die Daten in den Variablen dieser Art: -

{{barSuccess}} = [100, 99, 99, 99 .........] 
{{barFailure}} = [ 0, 0, 1, 0.3........] 
{{toolTipSuccess}} = [363, 763, 762, 987, ........] 
{toolTipFailure}} = [12, 3, 13, 8, .........] 

Vielen Dank im Voraus

Answer 1

Sie könnten Ihre eigenen Tooltip Formatierer definieren und dann die Position des in dem Eingabespalt Datenpunktes verwenden ' bar 'Daten zum Abrufen und Anzeigen der entsprechenden Daten aus toolTipSuccess/toolTipFailure. Betrachten Sie diese Schnipsel eines series.tooltip Definition:

//... more series definition 

tooltip: { 
    pointFormatter: function(){ 
    return "Rainfall: " + this.y + ", success: " + successPoints[this.series.data.indexOf(this)] + "<br />"; 
    } 
} 

//... more code 

var successPoints = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; 

JSfiddle hier: http://jsfiddle.net/L2ncbenx/1/

(Apologies, dies ist eine grobe Bearbeitung eines bestehenden highcharts Beispiel)

Wie Sie diese sehen können verwendet die Position des markierten Punkts, um die Position der erforderlichen Daten im anderen Datensatz zu finden.