帶有JSON數據和多個系列的Highcharts

Question

我試圖呈現Highcharts折線圖，但在加載頁面時出現一些問題。 Firebug不會顯示任何錯誤，所以我猜測這是我的數據結構或如何傳遞給Highcharts的問題。

數據來自JSON文件，變量使用我從another site獲得的方法加載...我的數據是每個月的數字y值，customTooltip是我希望在懸停時顯示的附加數據。

$.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); 

}); 

下面是一個更好的例子。我真正想要展示的是'y'作爲y軸，懸停時帶有'n'和'y'數據。 JSONLint說這是有效的。

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

你應該看看這個：http://api.highcharts.com/highcharts#series.data

如果指定每個點作爲一個對象，你可以選擇你想要的任何財產在你的提示格式化通過this.point添加到每個點和訪問它。

隨着作爲目前格式化

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

數據這應該產生：

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

然後在你的格式化功能，您可以acccess各爲this.point.y或this.point.n

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

工作：http://jsfiddle.net/sgearhart2/9P5fC/