【问题标题】:Parsing JSON using jQuery's each from array of arrays使用 jQuery 的 each 从数组数组中解析 JSON
【发布时间】:2016-09-08 18:36:02
【问题描述】:

注意:大量更新。缓慢但肯定地到达那里(主要是缓慢)

我有一个数组 JSON 数组,我需要从远程机器解析,但我在我的 javascript 中放了一个结构示例。

这是一个数组数组,我需要从称为“epochtime”(x-axis)和“errors”(y-axis)中提取一个纪元值。 “节点”可以忽略。我的代码在下面...小提琴在这里:https://jsfiddle.net/wilkiejane/uLuwazu3/4/

  var data = [
    [{
      "epochtime": 1470456000000,
      "errors": 2,
      "nodes": 5
    }],
    [{
      "epochtime": 1470484800000,
      "errors": 7,
      "nodes": 8
    }],
    [{
      "epochtime": 1470715200000,
      "errors": 10,
      "nodes": 11
    }],
    [{
      "epochtime": 1470855600000,
      "errors": 15,
      "nodes": 4
    }],
    [{
      "epochtime": 1470866400000,
      "errors": 10,
      "nodes": 6
    }],
    [{
      "epochtime": 1471024800000,
      "errors": 12,
      "nodes": 14
    }]
  ]

  var options = {
    chart: {
      renderTo: 'container',
      type: 'spline'
    },
    xAxis: {
      categories: []
    },
    series: [{
            name: 'Errors',
          data: []
    }]
  }

   Highcharts.each(data, function(i,ecs) {
       options.xAxis.categories.push(ecs.epochtime);
       options.series.data.push(parseFloat(ecs.errors));
  });

  $('#container').highcharts(options);

我知道由于我对 JSON 的解析,图表未绘制。当我注释掉 Highcharts.each...

  Highcharts.each(data, function(i,ecs) {
       options.xAxis.categories.push(ecs.epochtime);
       options.series.data.push(parseFloat(ecs.errors));
  });

并像这样详细指定类别和数据选项.....

  var options = {
    chart: {
      renderTo: 'container',
      type: 'spline'
    },
    xAxis: {
      categories: [1470456000000,1470484800000,1470715200000,1470855600000,1470866400000,1471024800000]
    },
    series: [{
            name: 'Errors',
          data: [2,7,10,15,10,12]
    }]
  }

它看起来很棒,所以很明显我的问题是试图提取“epochtime”和“errors”值。任何建议将不胜感激。

【问题讨论】:

  • I have an array of arrays JSON that I need 好吧,不,你有一个数组数组,没有 json。但是,我不确定为什么你有一个数组数组而不是一个对象数组,考虑到每个子数组只有一个项目,一个对象。如果你有一个对象数组,你的代码可能会按原样工作。

标签: javascript jquery json parsing highcharts


【解决方案1】:

这完全取决于您希望如何在图表中显示数据。如果要在其上显示日期(而不是类别轴),则应该具有日期时间轴。如果您想从您提供的数据中获得一个包含点的系列,您可以在此处找到如何将此数据添加到图表的代码:

  var options = {
    xAxis: {
      type: 'datetime'
    },
    series: [{
      data: []
    }]
  }
  Highcharts.each(data, function(p, i) {
    for (var i = 0; i < p.length; i++) {
      options.series[0].data.push(
        [p[i].timeBucket, parseFloat(p[i].errors)]
      );
    }
  });

您可以在此处找到图表如何工作的实时示例:https://jsfiddle.net/uLuwazu3/17/

【讨论】:

    猜你喜欢
    • 2010-12-03
    • 1970-01-01
    • 1970-01-01
    • 2012-05-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-15
    • 2016-05-08
    相关资源
    最近更新 更多