javascript - 使用具有来自 JSON 的多个系列的 Highcharts 的图表

标签 javascript json highcharts

我有一个以下格式的 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]
        ]
    }
]

我必须同时绘制“返回”和“利润”的图表。根据需要,可能还会将更多地 block 添加到列表中。数据数组的 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);
  }); 

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

最佳答案

您的 JSON 不正确,请尝试验证它。属性名称应包含双引号,从:name: 'Pay Off' 更改为:"name": "Pay Off"

关于javascript - 使用具有来自 JSON 的多个系列的 Highcharts 的图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17526201/

相关文章:

json - Swift 4 可编码 : the keys are Int array in JSON data

javascript - jQuery 没有生成我的 JSON

javascript - Highcharts.js 无法在光滑 slider 内工作

Javascript - chatjs donut 在悬停时运行脚本

javascript - 使用 ReactJs setState 更新状态

javascript - React中有三元运算符数据时传入<li>

highcharts - 在Highcharts中禁用PDF和SVG下载选项

javascript - 如何在 Highcharts 的 X 轴上显示两年的同一月份名称

javascript - 一次消耗 3 个元素的 AsyncGenerator?

javascript - 如何将 html Bootstrap 代码集成到 javascript 代码中?