集成 keen.io json 到 highcharts js

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

如果我没理解错的话，你可以稍微预处理一下你的数据，这样它就会满足你的要求，所以每个用户activity都会有特定的系列。您还可以使用 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/

集成 keen.io json 到 highcharts js

Integrate keen.io json to highcharts js

javascript

highcharts

keen-io