json 如何将多个数据系列放入 Highcharts
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16109742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get multiple data series into Highcharts
提问by lachlan
The following code works:
以下代码有效:
var options1 = {
chart: {
renderTo: 'container1'
},
series: [{}]
};
$.getJSON('tokyo.jsn', function(data){
options1.series[0].data = data;
var chart = new Highcharts.Chart(options1);
});
I want to be able to add a number of data series, so I am trying to take the reference to ‘new Highcharts' out of the getJSON, but I don't seem to get it right. This following code does not work:
我希望能够添加一些数据系列,所以我试图从 getJSON 中取出对“new Highcharts”的引用,但我似乎没有做对。以下代码不起作用:
$.getJSON('tokyo.jsn', function(data){
options1.series[0].data = data;
});
var chart = new Highcharts.Chart(options1);
I have also tried tackling it a different way but again the following code does not work:
我也尝试过以不同的方式解决它,但以下代码再次不起作用:
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1'
},
series: [{}]
});
$.getJSON('tokyo.jsn', function(data){
chart1.series[0].data = data;
});
Can anyone point me in the correct direction. I need to be able to support multiple data series by doing a second getJSON call like the following:
任何人都可以指出我正确的方向。我需要通过执行第二个 getJSON 调用来支持多个数据系列,如下所示:
$.getJSON('sydney.jsn', function(data){
options1.series[1].data = data;
});
The JSON code I'm using is as follows:
我使用的 JSON 代码如下:
[ 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 ]
Thanks
谢谢
回答by Pawe? Fus
You can use solution used by Highcharts in that example: http://www.highcharts.com/stock/demo/compare
您可以在该示例中使用 Highcharts 使用的解决方案:http://www.highcharts.com/stock/demo/compare
Or first create empty chart, without any series, and then use addSeries()function in each callback, see: http://api.highcharts.com/highcharts#Chart.addSeries()
或者先创建一个空图表,没有任何系列,然后addSeries()在每个回调中使用函数,参见:http: //api.highcharts.com/highcharts#Chart.addSeries()
回答by Amy
$.getJSONis an asynchronousrequest. Once you receive the data, then you can pass it to Highcharts, thus you have to call that code from within the callback function of $.getJSON().
$.getJSON是一个异步请求。收到数据后,您可以将其传递给 Highcharts,因此您必须从$.getJSON().
Try this, use a helper function to process your data and draw the chart, see drawChart()below:
试试这个,使用一个辅助函数来处理你的数据并绘制图表,见下drawChart()图:
var options1 = {
chart: {
renderTo: 'container1'
},
series: []
};
var drawChart = function(data, name) {
// 'series' is an array of objects with keys:
// - 'name' (string)
// - 'data' (array)
var newSeriesData = {
name: name,
data: data
};
// Add the new data to the series array
options1.series.push(newSeriesData);
// If you want to remove old series data, you can do that here too
// Render the chart
var chart = new Highcharts.Chart(options1);
};
$.getJSON('tokyo.jsn', function(data){
drawChart(data, 'Tokyo');
});
$.getJSON('sydney.jsn', function(data){
drawChart(data, 'Sydney');
});
See fiddle: http://jsfiddle.net/amyamy86/pUM7s/

