如何使用Keen渲染数据组多个属性

Question

我有一些数据结果按两个属性分组，

var avgResponseTime = new Keen.Query("average", {
  eventCollection: "some_collection",
  targetProperty: "response_time",
  groupBy: ["inventory", "search_type"]
});

如何呈现柱形图以按搜索类型的库存显示response_time？理想情况下，相同搜索类型的列应该粘在一起

我试过

client.draw(avgResponseTime, document.getElementById("some-element"), {
  chartType: "columnchart",
  title: "Average response time by inventory",
  chartOptions: {
  isStacked: true
 }
});

它不能很好地显示数据..列标签显示为search_type1，search_type2，search_type1，search_type1 ...（重复标签可能属于清单2）

感谢。

Answer 1

Keen.Dataviz()无法通过client.draw()开箱即可绘制此类图表，但您可以通过client.run()进行一些结果操作来直接自定义基础Google图表。您基本上需要循环查询结果并构建一个图表库可以理解的数组，以获得您正在寻找的内容。

默认情况下会继承Google图表库，这意味着您可以直接实例化google.visualization.DataTable()，而无需单独包含Google的图表库。

示例（需要jQuery）：

var avgResponseTime = new Keen.Query("average", {
  eventCollection: "some_collection",
  targetProperty: "response_time",
  groupBy: ["inventory", "search_type"]
});

client.run(avgResponseTime, function(error, response) {
  var result = response.result;

  // infer the inventory types
  var inventory_types = [];
  $.each(result, function(index, item) {
    inventory_types.push(item.inventory);
  });
  inventory_types = $.unique(inventory_types);

  // infer the search types
  var search_types = [];
  $.each(result, function(index, item) {
    search_types.push(item.search_type);
  });
  search_types = $.unique(search_types);

  var data = []; // array for our combined data points

  // we need a row for each unique search type
  $.each(search_types, function(index, item) {
    data.push([item]);
  });

  // iterate over each data point and push it into the correct array for our chart
  $.each(result, function(index, item) {
    // verify the search type and put the response time where it belongs
    for (var i = 0; i < search_types.length; i++) {
      if (data[i][0] == item.search_type) {
        data[i].push(item.result);
      }
    }
  });

  // init a datatable so we can customize our chart
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Inventory');

  // add each of our inventory types as a column in the datatable
  $.each(inventory_types, function(index, item) {
    dataTable.addColumn('number', item);
  });

  // add our response time averages
  dataTable.addRows(data);

  // configure the chart
  var options = {
    title: 'Average response time by inventory',
    height: 250,
    width: 'auto',
    hAxis: {
      title: 'Inventory',
    },
    vAxis: {
      title: 'Average Response Time'
    },
    legend: {
      position: 'top'
    }
  };

  // draw
  var chart = new google.visualization.ColumnChart(document.getElementById('some-element'));
  chart.draw(dataTable, options);
});

此代码假定您的事件集合包含至少包含以下属性的事件：

{
  "search_type": "British Rail",
  "inventory": "Multi-trip",
  "response_time": 600
}