0

我希望找到一种方法，使用 Keen 的可视化库来集成 Google Chart 的 ChartRangeFilter ( https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter )。Keen 的文档 ( https://github.com/keen/keen-js/blob/master/docs/visualization.md#line-chart ) 中与折线图相关的部分似乎没有提供任何图表包装器或控件。

简而言之，有没有办法使用开箱即用的 Keen 来呈现带有 ChartRangeFilter 的折线图？还是我必须要原始数据并为自己绘制图表？

4

1 回答 1

1

查看来自https://developers.google.com/chart/interactive/docs/gallery/controls#using-controls--and-dashboards的示例代码和 Google 图表说明，您需要将来自 Google 的代码合并到图表中从 Keen 计算结果后的部分。

您将首先准备数据（在您的情况下，使用从 Keen IO 返回的数据结果），然后创建仪表板，最后绘制/渲染组件（包括 chartRangeFilter）。绘制图表的范围过滤器是对现有可视化的修改，可以使用 Keen IO 绘制图表。

// Load the Google Visualization API and the controls package.
google.charts.load('current', {packages:['corechart', 'table', 'gauge', 'controls']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(init);

function init(){
  client
  //Run your Keen Query/Analysis Call 
  .query('count', {
      event_collection: 'add_to_carts',
      timeframe: {
        start: '2016-09-01',
        end: '2016-09-12'
      },
      interval: 'hourly',
      timezone: 'US/Pacific'
      //group_by: 'product_name'
  })
  .then(function(res){
  	var chart = new Dataviz()
    	.data(res)

    drawDashboard(chart.data());
  })
  .catch(function(err){
    console.log('err');
  });
}

// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard(keenDataTable) {

  // Create our data table.
  var data = google.visualization.arrayToDataTable(keenDataTable);

  // Create a dashboard.
  var dashboardEl = document.getElementById('dashboard_div');
  var dashboard = new google.visualization.Dashboard(dashboardEl);

  // Create a range slider, passing some options
  var chartRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
    'containerId': 'control_div',
    'options': {
	    'filterColumnIndex': 1,
      'ui': {
          'chartType': 'LineChart',
          'chartOptions': {
            'chartArea': {'height': '20%', 'width': '90%'},
            'hAxis': {'baselineColor': 'none'}
          }
      }
  	}
  });

  // Create a pie chart, passing some options
  var lineChart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart_div',
    'options': {
         // Use the same chart area width as the control for axis alignment.
        'chartArea': {'height': '80%', 'width': '90%'},
        'hAxis': {'slantedText': false},
        'vAxis': {'viewWindow': {'min': 0, 'max': 50}},
        'legend': {'position': 'none'}
    }
  });

  // Establish dependencies, declaring that 'filter' drives 'lineChart',
  // so that the chart will only display entries that are let through
  // given the chosen slider range.
  dashboard.bind(chartRangeSlider, lineChart);

  // Draw the dashboard.
  dashboard.draw(data);

这是运行此代码并显示与 Google 测距仪组件一起呈现的 Keen 分析结果的 JavaScript 小提琴的链接：http: //jsfiddle.net/kuqod2ya/4/

此代码示例使用最新的热衷分析.js 和敏锐-dataviz.js 库。要访问 Google 图表，其他选项包括 loader.js。

于 2017-01-12T00:59:09.963 回答