Question

任何人都可以帮我将这种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"
    }
  }
]

Answer 1

如果我理解正确，您可以稍微预处理数据，以满足您的要求，因此每个用户活动都会有特定的系列。您还可以使用新的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/

将keen.io json集成到highcharts js

1 个答案: