棒グラフは、しかし、細かいプロットされ、私は表示する必要がDjangoのデータベースバックエンドから、私はデータを使用してhighchartsで棒グラフを作成しようとしています別のデータ系列

Question

に基づいてhighchartsツールチップに

を文字列を追加しますツールチップにホバリング時のy値に加えて「contact_note」ストリング

データベースからのデータは、以下のJSON形式

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

に提供されている日付が、x軸を表します'値'はy軸で、私はツールが欲しいです「contact_note」フィールドの内容

を含むように先端がここに私のhighchartsコードです：

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

は私がシリーズのツールチップに接触ノートを追加するための簡単な方法はありますか？

本当にありがとうございました

Answer 1

確かに、どこかのバックエンドからのデータを保存する（私はちょうどあなたの返されたデータオブジェクトでそれを左）とtooltipformatter関数を使用します。 pointはformatterに渡され、indexがあり、これを使用して配列にインデックスを付けることができます。

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： あなたの現在の問題はcontact_notesがあなたのgetJSON関数内で定義されていることなので、それはフォーマッタ機能にスコープ外にあります。 getJSON関数の外にVARを定義

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