使用来自JSON的多个系列的Highcharts的图表 [英] Charts using Highcharts with multiple series from JSON

问题描述

我有以下格式的JSON文件：

  [
 
 {name：'支付'，
数据：[[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] 
] 
}，
 
 {
名称：'利润'，
数据：[[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] 
] 
 } 
] 
  

我必须绘制'偿还'和'利润'图。根据要求，更多的图可能会添加到列表中。数据数组的x轴为第0个元素，y轴为第1个元素。
我目前正在做的是以下内容 - $ / b
$ b $ $ $ $ $ $ $ $（document）.ready（function（）{
var options = {
chart：{
renderTo：'container'，
type：'line'
}，
title：{
text ：'PayOff Curve'
}，
图例：{
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）;
}）;

//创建图表
var chart = new Highcharts.Chart（options）;
}）;

但我根本没有任何图表，因为我是JavaScript和Python的新手，所以我无法弄清楚它的问题。请建议一个有效的方法来做到这一点。
感谢您的帮助..

解决方案

您的JSON不正确，请尝试验证它。属性名称shold有双引号，从： name：'Pay Off'更改为：name：Pay Off

I have a JSON file of the following format :

[

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

$(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..

解决方案

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的多个系列的Highcharts的图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！