将keen.io json集成到highcharts js答案

【问题标题】：Integrate keen.io json to highcharts js将keen.io json集成到highcharts js
【发布时间】：2016-08-30 09:48:26
【问题描述】：

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

【问题讨论】：

您希望如何显示图表？你有一些关于它应该是什么样子的图吗？现在我认为您可以使用工具提示来显示开始和结束时间：jsfiddle.net/bfmfj4md
不在评论中@GrzegorzBlachliński ...在答案中发布小提琴..这是很好的示范..
@GrzegorzBlachliński 我想用基本面积图类型显示它。但我认为你的小提琴已经解决了我的问题。我可以按照我需要的方式自定义它。非常感谢

标签： javascript highcharts keen-io

【解决方案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/

【讨论】：