1

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

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）

谢谢。

4

1 回答 1

1

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

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
}
于 2015-04-07T15:39:51.127 回答