Highcharts z danymi JSON i wieloma seriami

Question

Próbuję renderować wykres liniowy Highcharts, ale mam pewne problemy z wyświetlaniem serii podczas ładowania strony. Firebug nie pokazuje żadnych błędów, więc domyślam się, że to jest problem z tym, jak moje dane są uporządkowane lub jak są przekazywane do Highcharts.

Dane pochodzą z pliku JSON, a zmienne są ładowane za pomocą metody pobranej z another site ... Moje dane to wartość liczbowa y dla każdego miesiąca, przy czym niestandardowa etykieta to dodatkowe dane, które chcę wyświetlić po najechaniu myszą.

$.getJSON("json/mydata.txt",function(jdata) { 

var arr = []; 
$.each(jdata, function(key, val) { 
    var y = val.y; 
    var name = key; 
    var customTooltip = val.n; 
    arr.push({y: y, customTooltip: customTooltip}) 
}) 

var jseries = {name:arr.name, data:[{ny:arr.customTooltip, y:arr.y}]}; 

var options = { 
      chart: { 
       renderTo: 'fallcontainer', 
       defaultSeriesType: 'line' 
       }, 
      title: { 
       text: 'Monthly Rate', 
       style: { 
        margin: '10px 100px 0 0' // center it 
       } 
       }, 
      subtitle: { 
       text: 'Source', 
       style: { 
        margin: '0 100px 0 0' // center it 
       } 
       }, 
      xAxis: { 

       categories: ['Jan 12', 'Feb 12', 'Mar 12'] 
       }, 
      yAxis: { 
       title: { 
        text: 'Rate', 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }], 
       min:0 
       }, 
      legend: { 
       layout: 'vertical', 
       align:'right', 
       verticalAlign:'middle', 
       x:0, 
       title:'Care Setting' 
       }, 
      plotOptions: { 
       }, 
      credits: { 
       enabled:false 
       }, 
      series:[] 
}; 

options.series.push(jseries); 

var chart = new Highcharts.Chart(options); 

}); 

Oto lepszy przykład. To, co naprawdę chcę wyświetlić, to "y" jako oś y z danymi "n" i "y" na zawisie. JSONLint powiedział, że to jest poprawne.

{ 
"Total": { 
    "y": [ 
     9.39, 
     90.35, 
     90.36, 
     92.69, 
     93.02, 
     90.32, 
     90.6, 
     9.09, 
     9.5, 
     90.69, 
     9.6, 
     90.69, 
     9.53, 
     6.92 
    ], 
    "name": "Total", 
    "n": [ 
     962, 
     969, 
     999, 
     233, 
     235, 
     968, 
     999, 
     963, 
     989, 
     293, 
     986, 
     293, 
     989, 
     908 
    ] 
}, 
"Cat1": { 
    "y": [ 
     6.38, 
     6.63, 
     90.3, 
     9.65, 
     90.25, 
     8.99, 
     92.39, 
     99.39, 
     9.28, 
     99.35, 
     99.36, 
     93.38, 
     8.69, 
     8.03 
    ], 
    "name": "Cat1", 
    "n": [ 
     6, 
     6, 
     90, 
     90, 
     90, 
     8, 
     93, 
     93, 
     99, 
     93, 
     93, 
     96, 
     99, 
     9 
    ] 
} 
} 

Answer 1

Należy spojrzeć na to: http://api.highcharts.com/highcharts#series.data

Jeśli podasz każdy punkt jako obiekt, można dodać dowolny obiekt, który ma zostać każdym punkcie i do niego dostęp w swoim podpowiedzi formater przez this.point.

Z danych jak obecnie sformatowanych

var seriesArr = []; 
$.each(jdata, function(key, data) { 
    var series = {name : key, data : []}; 

    $.each(data.y, function(index, value) { 
    series.data.push({y: value }); 
    }); 

    $.each(data.n, function(index, value) { 
    series.data[index].n = value; 
    }); 
    seriesArr.push(series); 
}); 

ta powinna przynieść:

seriesArr : [{ 
    name : 'Total', 
    data : [ 
     {y:9.39, n:9.62}, 
     ... 
    ] 
    }, 
... 
] 

Następnie w funkcji formatowania, można acccess każdy jako this.point.y lub this.point.n

tooltip: { 
    formatter: function() { 
    return 'Y value is : ' + this.point.y + '<br>' + 'N value is : ' + this.point.n; 
    } 
}, 

robocza: http://jsfiddle.net/sgearhart2/9P5fC/