javascript 使用来自 JSON 的多个系列的 Highcharts 的图表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17526201/
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
Charts using Highcharts with multiple series from JSON
提问by user2560600
I have a JSON file of the following format :
我有一个以下格式的 JSON 文件：
[
{ name: 'Pay Off',
data: [ [2850,0],
[3135,0],
[3420,0],
[3705,0],
[3990,0],
[4275,0],
[4560,0],
[4845,0],
[5130,0],
[5415,0],
[5700,0],
[5985,285],
[6270,570],
[6555,855],
[6840,1140],
[7125,1425],
[7410,1710],
[7695,1995],
[7980,2280],
[8265,2565],
[8550,2850]
]
},
{
name: 'Profit',
data: [ [2850,-250],
[3135,-250],
[3420,-250],
[3705,-250],
[3990,-250],
[4275,-250],
[4560,-250],
[4845,-250],
[5130,-250],
[5415,-250],
[5700,-250],
[5985,35],
[6270,320],
[6555,605],
[6840,890],
[7125,1175],
[7410,1460],
[7695,1745],
[7980,2030],
[8265,2315],
[8550,2600]
]
}
]
I have to plot graph for 'Pay Off' and 'Profit' together. Even more plots maybe added to the list as per requirement. The data array has x-axis as 0th element and y-axis as 1st element. What I am currently doing is the following -
我必须一起绘制“支付”和“利润”的图表。甚至可以根据需要将更多图添加到列表中。数据数组的 x 轴为第 0 个元素，y 轴为第 1 个元素。我目前正在做的是以下 -
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'PayOff Curve'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: []
};
$.getJSON('data.json', function(list) {
var newseries = {
name: '',
data: []
};
$.each(list, function(i,item){
newseries.name = item.name;
newseries.data = item.data;
options.series.push(newseries);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
But I don't any graph at all. I can't figure out the issue with it as I am new to both JavaScript and Python. Please suggest an efficient method to do this. Thanks for your help..
但我根本没有任何图表。我无法弄清楚它的问题，因为我是 JavaScript 和 Python 的新手。请提出一种有效的方法来做到这一点。谢谢你的帮助..
回答by Pawe? Fus
Your JSON isn't proper one, try to validate it. Properties names shold have double quotes, change from: name: 'Pay Off'to: "name": "Pay Off"
您的 JSON 不正确，请尝试验证它。属性名称应包含双引号，从：更改name: 'Pay Off'为："name": "Pay Off"
回答by RobH
Your JSON is valid for a highcharts series - you don't need to try to transform it at all:
您的 JSON 对 highcharts 系列有效 - 您根本不需要尝试对其进行转换：
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'PayOff Curve'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: []
};
$.getJSON('data.json', function(list) {
options.series = list; // <- just assign the data to the series property.
var chart = new Highcharts.Chart(options);
});
});
If that still doesn't work, open the console to see whether there's a JavaScript error.
如果仍然不起作用，请打开控制台查看是否存在 JavaScript 错误。
Here's a fiddle.
这是一个小提琴。
