0

任何人都可以帮助我将这种 json 数据表示为 highcharts 时间序列图表。令人困惑的部分是我从这个 json 得到的时间范围

[
  {
    "value": {
      "registered_user": 12,
      "inactive_user": 5,
      "active_user": 7
    },
    "timeframe": {
      "start": "2016-06-01T00:00:00.000Z",
      "end": "2016-07-01T00:00:00.000Z"
    }
  },
  {
    "value": {
      "registered_user": 30,
      "inactive_user": 10,
      "active_user": 20
    },
    "timeframe": {
      "start": "2016-07-01T00:00:00.000Z",
      "end": "2016-08-01T00:00:00.000Z"
    }
  },
  {
    "value": {
      "registered_user": 25,
      "inactive_user": 8,
      "active_user": 17
    },
    "timeframe": {
      "start": "2016-08-01T00:00:00.000Z",
      "end": "2016-08-30T00:00:00.000Z"
    }
  }
]
4

1 回答 1

1

如果我理解正确，您可以稍微预处理您的数据，使其符合您的要求，因此每个用户活动都会有特定的系列。您还可以使用 new Date().getTime() 将日期字符串更改为毫秒（Highcharts datetime xAxis 接受的格式）：

  var json = [{
    "value": {
      "registered_user": 12,
      "inactive_user": 5,
      "active_user": 7
    },
    "timeframe": {
      "start": "2016-06-01T00:00:00.000Z",
      "end": "2016-07-01T00:00:00.000Z"
    }
  }, {
    "value": {
      "registered_user": 30,
      "inactive_user": 10,
      "active_user": 20
    },
    "timeframe": {
      "start": "2016-07-01T00:00:00.000Z",
      "end": "2016-08-01T00:00:00.000Z"
    }
  }, {
    "value": {
      "registered_user": 25,
      "inactive_user": 8,
      "active_user": 17
    },
    "timeframe": {
      "start": "2016-08-01T00:00:00.000Z",
      "end": "2016-08-30T00:00:00.000Z"
    }
  }];
  var series = [{
    name: 'registered_user',
    data: []
  }, {
    name: 'inactive_user',
    data: []
  }, {
    name: "active_user",
    data: []
  }];
  var startTime;
  Highcharts.each(json, function(p, i) {
    startTime = new Date(p.timeframe.start).getTime();
    series[0].data.push({
      x: startTime,
      y: p.value.registered_user,
      timeFrame: p.timeframe
    });
    series[1].data.push({
      x: startTime,
      y: p.value.inactive_user,
      timeFrame: p.timeframe
    });
    series[2].data.push({
      x: startTime,
      y: p.value.active_user,
      timeFrame: p.timeframe
    });
  });

在这里你可以找到一个例子它是如何工作的：http: //jsfiddle.net/bfmfj4md/

于 2016-08-30T10:37:24.290 回答