带有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/