如何在Highchart上呈现json数据

时间：2014-04-07 10:09:29

标签： json backbone.js highcharts 

[{"SEEP":"IW-B-(L)","DATE":" 27-Jul-13","resLevel":79.215,"flowRate":1320.25},
{"SEEP":"IW-B-(L)","DATE":" 28-Jul-13","resLevel":79.25,"flowRate":1320.833333},
{"SEEP":"IW-B-(L)","DATE":" 29-Jul-13","resLevel":79.275,"flowRate":1321.25},
{"SEEP":"IW-B-(L)","DATE":" 30-Jul-13","resLevel":79.29,"flowRate":1321.5},
{"SEEP":"IW-B-(L)","DATE":" 31-Jul-13","resLevel":79.315,"flowRate":1321.916667},
{"SEEP":"IW-B-(L)","DATE":" 1-Aug-13","resLevel":79.365,"flowRate":1322.75},
{"SEEP":"IW-B-(L)","DATE":" 2-Aug-13","resLevel":79.38,"flowRate":1323},
{"SEEP":"IW-B-(L)","DATE":" 3-Aug-13","resLevel":79.38,"flowRate":1323},
{"SEEP":"IW-B-(L)","DATE":" 4-Aug-13","resLevel":79.58,"flowRate":1326.333333},
{"SEEP":"IW-B-(L)","DATE":" 5-Aug-13","resLevel":79.66,"flowRate":1327.666667},
{"SEEP":"IW-B-(L)","DATE":" 6-Aug-13","resLevel":79.8,"flowRate":1330},
{"SEEP":"IW-B-(L)","DATE":" 7-Aug-13","resLevel":79.8,"flowRate":1330},
{"SEEP":"IW-B-(L)","DATE":" 8-Aug-13","resLevel":79.965,"flowRate":1332.75},
{"SEEP":"IW-B-(L)","DATE":" 9-Aug-13","resLevel":80.15,"flowRate":1335.833333},
{"SEEP":"IW-B-(L)","DATE":" 10-Aug-13","resLevel":80.285,"flowRate":1338.083333},
{"SEEP":"IW-B-(L)","DATE":" 11-Aug-13","resLevel":80.395,"flowRate":1339.916667},
{"SEEP":"IW-B-(L)","DATE":" 12-Aug-13","resLevel":80.44,"flowRate":1340.666667},
{"SEEP":"IW-B-(L)","DATE":" 13-Aug-13","resLevel":80.54,"flowRate":1342.333333},
{"SEEP":"IW-B-(L)","DATE":" 14-Aug-13","resLevel":81.495,"flowRate":1358.25},
{"SEEP":"IW-B-(R)","DATE":" 27-Jul-13","resLevel":79.215,"flowRate":1320.25},
{"SEEP":"IW-B-(R)","DATE":" 28-Jul-13","resLevel":79.25,"flowRate":1320.833333},
{"SEEP":"IW-B-(R)","DATE":" 29-Jul-13","resLevel":79.275,"flowRate":1321.25},
{"SEEP":"IW-B-(R)","DATE":" 30-Jul-13","resLevel":79.29,"flowRate":1321.5},
{"SEEP":"IW-B-(R)","DATE":" 31-Jul-13","resLevel":79.315,"flowRate":1321.916667},
{"SEEP":"IW-B-(R)","DATE":" 1-Aug-13","resLevel":79.365,"flowRate":1322.75},
{"SEEP":"IW-B-(R)","DATE":" 2-Aug-13","resLevel":79.38,"flowRate":1323},
{"SEEP":"IW-B-(R)","DATE":" 3-Aug-13","resLevel":79.38,"flowRate":1323},
{"SEEP":"IW-B-(R)","DATE":" 4-Aug-13","resLevel":79.58,"flowRate":1326.333333},
{"SEEP":"IW-B-(R)","DATE":" 5-Aug-13","resLevel":82.38,"flowRate":1373},
{"SEEP":"IW-B-(R)","DATE":" 6-Aug-13","resLevel":83.555,"flowRate":1392.583333},
{"SEEP":"IW-B-(R)","DATE":" 7-Aug-13","resLevel":84.55,"flowRate":1409.166667},
{"SEEP":"IW-B-(R)","DATE":" 8-Aug-13","resLevel":84.695,"flowRate":1411.583333},
{"SEEP":"IW-B-(R)","DATE":" 9-Aug-13","resLevel":86.89,"flowRate":1448.166667},
{"SEEP":"IW-B-(R)","DATE":" 10-Aug-13","resLevel":87.545,"flowRate":1459.083333},
{"SEEP":"IW-B-(R)","DATE":" 11-Aug-13","resLevel":88.8,"flowRate":1480},
{"SEEP":"IW-B-(R)","DATE":" 12-Aug-13","resLevel":88.955,"flowRate":1482.583333},
{"SEEP":"IW-B-(R)","DATE":" 13-Aug-13","resLevel":89.051,"flowRate":1484.183333},
{"SEEP":"IW-B-(R)","DATE":" 14-Aug-13","resLevel":90.154,"flowRate":1502.566667},
{"SEEP":"IW-D","DATE":" 27-Jul-13","resLevel":79.66,"flowRate":1327.666667},
{"SEEP":"IW-D","DATE":" 28-Jul-13","resLevel":79.8,"flowRate":1330},
{"SEEP":"IW-D","DATE":" 29-Jul-13","resLevel":79.8,"flowRate":1330},
{"SEEP":"IW-D","DATE":" 30-Jul-13","resLevel":79.965,"flowRate":1332.75},
{"SEEP":"IW-D","DATE":" 31-Jul-13","resLevel":80.15,"flowRate":1335.833333},
{"SEEP":"IW-D","DATE":" 1-Aug-13","resLevel":80.285,"flowRate":1338.083333},
{"SEEP":"IW-D","DATE":" 2-Aug-13","resLevel":80.395,"flowRate":1339.916667},
{"SEEP":"IW-D","DATE":" 3-Aug-13","resLevel":80.44,"flowRate":1340.666667},
{"SEEP":"IW-D","DATE":" 4-Aug-13","resLevel":80.54,"flowRate":1342.333333},
{"SEEP":"IW-D","DATE":" 5-Aug-13","resLevel":81.495,"flowRate":1358.25},
{"SEEP":"IW-D","DATE":" 6-Aug-13","resLevel":82.79,"flowRate":1379.833333},
{"SEEP":"IW-D","DATE":" 7-Aug-13","resLevel":84.55,"flowRate":1409.166667},
{"SEEP":"IW-D","DATE":" 8-Aug-13","resLevel":84.65,"flowRate":1410.833333},
{"SEEP":"IW-D","DATE":" 9-Aug-13","resLevel":85,"flowRate":1416.666667},
{"SEEP":"IW-D","DATE":" 10-Aug-13","resLevel":89.35,"flowRate":1489.166667},
{"SEEP":"IW-D","DATE":" 11-Aug-13","resLevel":89.95,"flowRate":1499.166667},
{"SEEP":"IW-D","DATE":" 12-Aug-13","resLevel":90.05,"flowRate":1500.833333},
{"SEEP":"IW-D","DATE":" 13-Aug-13","resLevel":91.25,"flowRate":1520.833333},
{"SEEP":"IW-D","DATE":" 14-Aug-13","resLevel":91.3,"flowRate":1521.666667},
{"SEEP":"IW-E-(L)","DATE":" 27-Jul-13","resLevel":79.29,"flowRate":1321.5},
{"SEEP":"IW-E-(L)","DATE":" 28-Jul-13","resLevel":79.315,"flowRate":1321.916667},
{"SEEP":"IW-E-(L)","DATE":" 29-Jul-13","resLevel":79.365,"flowRate":1322.75},
{"SEEP":"IW-E-(L)","DATE":" 30-Jul-13","resLevel":79.38,"flowRate":1323},
{"SEEP":"IW-E-(L)","DATE":" 31-Jul-13","resLevel":79.38,"flowRate":1323},
{"SEEP":"IW-E-(L)","DATE":" 1-Aug-13","resLevel":79.58,"flowRate":1326.333333},
{"SEEP":"IW-E-(L)","DATE":" 2-Aug-13","resLevel":79.66,"flowRate":1327.666667},
{"SEEP":"IW-E-(L)","DATE":" 3-Aug-13","resLevel":79.8,"flowRate":1330},
{"SEEP":"IW-E-(L)","DATE":" 4-Aug-13","resLevel":79.8,"flowRate":1330},
{"SEEP":"IW-E-(L)","DATE":" 5-Aug-13","resLevel":79.965,"flowRate":1332.75},
{"SEEP":"IW-E-(L)","DATE":" 6-Aug-13","resLevel":80.15,"flowRate":1335.833333},
{"SEEP":"IW-E-(L)","DATE":" 7-Aug-13","resLevel":80.285,"flowRate":1338.083333},
{"SEEP":"IW-E-(L)","DATE":" 8-Aug-13","resLevel":80.395,"flowRate":1339.916667},
{"SEEP":"IW-E-(L)","DATE":" 9-Aug-13","resLevel":80.44,"flowRate":1340.666667},
{"SEEP":"IW-E-(L)","DATE":" 10-Aug-13","resLevel":80.54,"flowRate":1342.333333},
{"SEEP":"IW-E-(L)","DATE":" 11-Aug-13","resLevel":81.495,"flowRate":1358.25},
{"SEEP":"IW-E-(L)","DATE":" 12-Aug-13","resLevel":82.36,"flowRate":1372.666667},
{"SEEP":"IW-E-(L)","DATE":" 13-Aug-13","resLevel":82.69,"flowRate":1378.166667},
{"SEEP":"IW-E-(L)","DATE":" 14-Aug-13","resLevel":83.88,"flowRate":1398},
{"SEEP":"IW-E-(R)","DATE":" 27-Jul-13","resLevel":75.05,"flowRate":1250.833333},
{"SEEP":"IW-E-(R)","DATE":" 28-Jul-13","resLevel":75.25,"flowRate":1254.166667},
{"SEEP":"IW-E-(R)","DATE":" 29-Jul-13","resLevel":76.95,"flowRate":1282.5},
{"SEEP":"IW-E-(R)","DATE":" 30-Jul-13","resLevel":78,"flowRate":1300},
{"SEEP":"IW-E-(R)","DATE":" 31-Jul-13","resLevel":78.115,"flowRate":1301.916667},
{"SEEP":"IW-E-(R)","DATE":" 1-Aug-13","resLevel":79.215,"flowRate":1320.25},
{"SEEP":"IW-E-(R)","DATE":" 2-Aug-13","resLevel":79.25,"flowRate":1320.833333},
{"SEEP":"IW-E-(R)","DATE":" 3-Aug-13","resLevel":79.275,"flowRate":1321.25},
{"SEEP":"IW-E-(R)","DATE":" 4-Aug-13","resLevel":79.29,"flowRate":1321.5},
{"SEEP":"IW-E-(R)","DATE":" 5-Aug-13","resLevel":79.315,"flowRate":1321.916667},
{"SEEP":"IW-E-(R)","DATE":" 6-Aug-13","resLevel":79.365,"flowRate":1322.75},
{"SEEP":"IW-E-(R)","DATE":" 7-Aug-13","resLevel":79.38,"flowRate":1323},
{"SEEP":"IW-E-(R)","DATE":" 8-Aug-13","resLevel":79.38,"flowRate":1323},
{"SEEP":"IW-E-(R)","DATE":" 9-Aug-13","resLevel":79.58,"flowRate":1326.333333},
{"SEEP":"IW-E-(R)","DATE":" 10-Aug-13","resLevel":79.66,"flowRate":1327.666667},
{"SEEP":"IW-E-(R)","DATE":" 11-Aug-13","resLevel":79.8,"flowRate":1330},
{"SEEP":"IW-E-(R)","DATE":" 12-Aug-13","resLevel":79.8,"flowRate":1330},
{"SEEP":"IW-E-(R)","DATE":" 13-Aug-13","resLevel":79.965,"flowRate":1332.75},
{"SEEP":"IW-E-(R)","DATE":" 14-Aug-13","resLevel":80.15,"flowRate":1335.833333},
{"SEEP":"SM-1","DATE":" 27-Jul-13","resLevel":80.285,"flowRate":1338.083333},
{"SEEP":"SM-1","DATE":" 28-Jul-13","resLevel":80.395,"flowRate":1339.916667},
{"SEEP":"SM-1","DATE":" 29-Jul-13","resLevel":80.44,"flowRate":1340.666667},
{"SEEP":"SM-1","DATE":" 30-Jul-13","resLevel":80.54,"flowRate":1342.333333},
{"SEEP":"SM-1","DATE":" 31-Jul-13","resLevel":81.495,"flowRate":1358.25},
{"SEEP":"SM-1","DATE":" 1-Aug-13","resLevel":76.15,"flowRate":1269.166667},
{"SEEP":"SM-1","DATE":" 2-Aug-13","resLevel":76.95,"flowRate":1282.5},
{"SEEP":"SM-1","DATE":" 3-Aug-13","resLevel":78,"flowRate":1300},
{"SEEP":"SM-1","DATE":" 4-Aug-13","resLevel":78.115,"flowRate":1301.916667},
{"SEEP":"SM-1","DATE":" 5-Aug-13","resLevel":79.215,"flowRate":1320.25},
{"SEEP":"SM-1","DATE":" 6-Aug-13","resLevel":79.25,"flowRate":1320.833333},
{"SEEP":"SM-1","DATE":" 7-Aug-13","resLevel":79.275,"flowRate":1321.25},
{"SEEP":"SM-1","DATE":" 8-Aug-13","resLevel":79.29,"flowRate":1321.5},
{"SEEP":"SM-1","DATE":" 9-Aug-13","resLevel":79.315,"flowRate":1321.916667},
{"SEEP":"SM-1","DATE":" 10-Aug-13","resLevel":79.365,"flowRate":1322.75},
{"SEEP":"SM-1","DATE":" 11-Aug-13","resLevel":79.38,"flowRate":1323},
{"SEEP":"SM-1","DATE":" 12-Aug-13","resLevel":79.38,"flowRate":1323},
{"SEEP":"SM-1","DATE":" 13-Aug-13","resLevel":79.58,"flowRate":1326.333333},
{"SEEP":"SM-1","DATE":" 14-Aug-13","resLevel":79.66,"flowRate":1327.666667},
{"SEEP":"SM-2-(L)","DATE":" 27-Jul-13","resLevel":79.8,"flowRate":1330},
{"SEEP":"SM-2-(L)","DATE":" 28-Jul-13","resLevel":79.8,"flowRate":1330},
{"SEEP":"SM-2-(L)","DATE":" 29-Jul-13","resLevel":79.965,"flowRate":1332.75},
{"SEEP":"SM-2-(L)","DATE":" 30-Jul-13","resLevel":80.15,"flowRate":1335.833333},
{"SEEP":"SM-2-(L)","DATE":" 31-Jul-13","resLevel":80.285,"flowRate":1338.083333},
{"SEEP":"SM-2-(L)","DATE":" 1-Aug-13","resLevel":80.395,"flowRate":1339.916667},
{"SEEP":"SM-2-(L)","DATE":" 2-Aug-13","resLevel":80.44,"flowRate":1340.666667},
{"SEEP":"SM-2-(L)","DATE":" 3-Aug-13","resLevel":80.54,"flowRate":1342.333333},
{"SEEP":"SM-2-(L)","DATE":" 4-Aug-13","resLevel":81.495,"flowRate":1358.25},
{"SEEP":"SM-2-(L)","DATE":" 5-Aug-13","resLevel":76.15,"flowRate":1269.166667},
{"SEEP":"SM-2-(L)","DATE":" 6-Aug-13","resLevel":76.95,"flowRate":1282.5},
{"SEEP":"SM-2-(L)","DATE":" 7-Aug-13","resLevel":78,"flowRate":1300},
{"SEEP":"SM-2-(L)","DATE":" 8-Aug-13","resLevel":78.115,"flowRate":1301.916667},
{"SEEP":"SM-2-(L)","DATE":" 9-Aug-13","resLevel":79.215,"flowRate":1320.25},
{"SEEP":"SM-2-(L)","DATE":" 10-Aug-13","resLevel":79.215,"flowRate":1320.25},
{"SEEP":"SM-2-(L)","DATE":" 11-Aug-13","resLevel":79.25,"flowRate":1320.833333},
{"SEEP":"SM-2-(L)","DATE":" 12-Aug-13","resLevel":79.275,"flowRate":1321.25},
{"SEEP":"SM-2-(L)","DATE":" 13-Aug-13","resLevel":79.29,"flowRate":1321.5},
{"SEEP":"SM-2-(L)","DATE":"14-Aug-13","resLevel":79.315,"flowRate":1321.916667},
{"SEEP":"SM-2-(R)","DATE":"27-Jul-13","resLevel":79.365,"flowRate":1322.75},
{"SEEP":"SM-2-(R)","DATE":"28-Jul-13","resLevel":79.38,"flowRate":1323},
{"SEEP":"SM-2-(R)","DATE":"29-Jul-13","resLevel":79.38,"flowRate":1323},
{"SEEP":"SM-2-(R)","DATE":"30-Jul-13","resLevel":79.58,"flowRate":1326.333333},
{"SEEP":"SM-2-(R)","DATE":"31-Jul-13","resLevel":79.66,"flowRate":1327.666667},
{"SEEP":"SM-2-(R)","DATE":"1-Aug-13","resLevel":79.8,"flowRate":1330},
{"SEEP":"SM-2-(R)","DATE":"2-Aug-13","resLevel":79.8,"flowRate":1330},
{"SEEP":"SM-2-(R)","DATE":"3-Aug-13","resLevel":79.965,"flowRate":1332.75},
{"SEEP":"SM-2-(R)","DATE":"4-Aug-13","resLevel":80.15,"flowRate":1335.833333},
{"SEEP":"SM-2-(R)","DATE":"5-Aug-13","resLevel":80.285,"flowRate":1338.083333},
{"SEEP":"SM-2-(R)","DATE":"6-Aug-13","resLevel":80.395,"flowRate":1339.916667},
{"SEEP":"SM-2-(R)","DATE":"7-Aug-13","resLevel":80.44,"flowRate":1340.666667},
{"SEEP":"SM-2-(R)","DATE":"8-Aug-13","resLevel":80.54,"flowRate":1342.333333},
{"SEEP":"SM-2-(R)","DATE":"9-Aug-13","resLevel":81.495,"flowRate":1358.25},
{"SEEP":"SM-2-(R)","DATE":"10-Aug-13","resLevel":82.38,"flowRate":1373},
{"SEEP":"SM-2-(R)","DATE":"11-Aug-13","resLevel":83.55,"flowRate":1392.5},
{"SEEP":"SM-2-(R)","DATE":"12-Aug-13","resLevel":84.55,"flowRate":1409.166667},
{"SEEP":"SM-2-(R)","DATE":"13-Aug-13","resLevel":84.65,"flowRate":1410.833333},
{"SEEP":"SM-2-(R)","DATE":"14-Aug-13","resLevel":86.89,"flowRate":1448.166667}]

这是要在图表上显示的数据（以json格式），我不知道如何对resLevel和flowRate

进行分类

这是我一直致力于

的代码 
this.collection.each(function (data) {
    var dt = data.attributes.DATE,
        resLevel = data.attributes.resLevel,
        flowRate = data.attributes.flowRate;
    options.series.push({
       'name': 'Reservoir Level',
       data: [dt, resLevel]
    });
    options.series.push({
       'name': 'Flow Rate',
       yAxis: 1,
       data: [dt, flowRate]
   });
}, this);

上面的代码使用的是backbone.js，它位于backbone.view.extend中。请帮忙

更新：感谢@pawel

enter image description here

这里得到的结果对我来说当然是错的。它应该只显示两个选项，储层水平和流速

1 个答案:

答案 0 :(得分：1)

改变：

this.collection.each(function (data) {
var dt = data.attributes.DATE,
    resLevel = data.attributes.resLevel,
    flowRate = data.attributes.flowRate;
options.series.push({
   'name': 'Reservoir Level',
   data: [dt, resLevel]
});
options.series.push({
   'name': 'Flow Rate',
   yAxis: 1,
   data: [dt, flowRate]
});
}, this);

要仅创建两个系列，请为该系列添加点：

options.series.push({
   'name': 'Reservoir Level',
   data: []
});
options.series.push({
   'name': 'Flow Rate',
   yAxis: 1,
   data: []
});

this.collection.each(function (data) {
var dt = data.attributes.DATE,
    resLevel = data.attributes.resLevel,
    flowRate = data.attributes.flowRate;
    options.series[0].data.push([dt, resLevel]);
    options.series[1].data.push([dt, flowRate]);
}, this);
相关问题
最新问题