einen String in highcharts Tooltip basierend auf einer separate Datenreihe

Question

I unter Verwendung von Daten aus einer django Datenbank versuchen ein Balkendiagramm in highcharts zu erstellen Back-End-

die Balkendiagramm Plotten aber feine Hinzufügen muß ich zeigen, der ‚contact_note‘ string zusätzlich zu den y-Werten, auf im Tooltip

schweben

die Daten aus der Datenbank in dem folgende json Format

{ 
    "chart_data": { 
    "dates": [ 
     "12/12/16", 
     "01/28/17", 
     "02/10/17", 
    ], 
    "values": [ 
     9.0, 
     47.0, 
     13.0, 
    ], 
    "contact_notes": [ 
     "aa", 
     "bb", 
     "cc" 
    ] 
    } 
} 

die Daten, die x-Achse bedient werden repräsentieren, die "Werte" sind die Y-Achse und ich möchte das Werkzeug kippen Sie den Inhalt des ‚contact_note‘ Feld

Hier ist Code meine highcharts enthalten: für mich

<script> 

$(document).ready(function() { 

    var options = { 
     chart: { 
      renderTo: 'chart_panel', 
      type: 'column', 
     }, 
     legend: {enabled: false}, 
     title: {text: 'Days Between Meetings'}, 
     tooltip: { 
     formatter: function() { 
      return "<span style='color:" + this.point.color + "'>\u25CF</span> " + this.series.name + " : <b>" + this.point.y + "</b> " + contact_notes[this.point.index] + "<br/>"; 
     }}, 
     xAxis: {title: {text: null}, labels: {rotation: -45}}, 
     yAxis: {title: {text: null}, 
     plotLines: [{ 
       value: 20, 
       color: 'orange', 
       dashStyle: 'shortdash', 
       width: 1.5}] 
     }, 
     plotOptions: {column: {dataLabels: {enabled: true}}}, 
     series: [{}], 
    }; 


    var chartDataUrl = "{% url 'chart_data' pk %}" 

    $.getJSON(chartDataUrl, 
     function(data) { 
      options.xAxis.categories = data['chart_data']['dates']; 
      options.series[0].name = 'Days between contacts'; 
      options.series[0].data = data['chart_data']['values']; 

      var contact_notes = data['chart_data']['contact_notes']; 

      var chart = new Highcharts.Chart(options); 
    }); 

}); 

</script> 

Gibt es eine einfache Möglichkeit, die Kontakt Erläuterungen zur Serie Tooltip anhängen?

Vielen Dank

Answer 1

Sicher, die Daten aus dem Backend speichert irgendwo (Ich habe es nur in Ihrem Datenobjekt zurückgegeben) und verwenden Sie die tooltipformatter Funktion. Die point wird in die formatter übergeben und es hat eine index, die Sie verwenden können, um in Ihr Array zu indizieren.

http://jsfiddle.net/yjL551vp/

tooltip: { 
     formatter: function() { 
      return "<span style='color:" + this.point.color + "'>\u25CF</span> " + this.series.name + " : <b>" + this.point.y + "</b> " + data.chart_data.contact_notes[this.point.index] + "<br/>"; 
     } 
    }, 

EDIT: Ihr aktuelles Problem ist, dass contact_notes innerhalb Ihrer getJSON Funktion definiert ist, so dass es außerhalb des Gültigkeitsbereichs in der Formatierungsfunktion. Definieren Sie die Variable außerhalb der getJSON-Funktion

var chartDataUrl = "{% url 'chart_data' pk %}" 
    var contact_notes = []; 
    $.getJSON(chartDataUrl, 
     function(data) { 
      options.xAxis.categories = data['chart_data']['dates']; 
      options.series[0].name = 'Days between contacts'; 
      options.series[0].data = data['chart_data']['values']; 

      contact_notes = data['chart_data']['contact_notes']; 

      var chart = new Highcharts.Chart(options); 
    });