Google 图表 Filter/Control 基于隐藏值的图表

Question

我有一个包含以下数据的散点图：

[ 'HDD', 'Oil Consumption']
['100','1000']
['50','500']
['10,'100']

假设每个数据点取自特定日期：

[ 'HDD', 'Oil Consumption', 'Date']
['100','1000','1 January 2015']
['50','500', '1 February 2015']
['10,'100', '1 March 2015']

如何添加过滤器（最好是 DateRangeFilter）以基于日期列进行过滤，即使日期列实际上并不是散点图的一部分。

Answer 1

您可以使用 ChartWrapper、ControlWrapper 和 Dashboard。

Here is the documentation related to this from Google.

基本上，您不是使用 new google.visualization.ScatterChart(document.getElementById('yourId')) 启动图表，而是使用称为 ChartWrapper 的东西（在我看来，这是一种更简单、更易读的方法）。

然后创建一个 ControlWrapper（控件（日期范围过滤器）元素的包装器）。

最后，您通过 Dashboard 将 ControlWrapper 绑定到 ChartWrapper。您的数据可能是这样的：

        var data = google.visualization.arrayToDataTable([
      ['Age', 'Weight', 'Date'],
      [ 8,      12, new Date(2015, 10, 1)],
      [ 4,      5.5, new Date(2015, 10, 2)],
      [ 11,     14, new Date(2015, 10, 3)],
      [ 4,      5, new Date(2015, 10, 4)],
      [ 3,      3.5, new Date(2015, 10, 5)],
      [ 6.5,    7, new Date(2015, 10, 6)]
    ]);

ChartWrapper 可能如下所示：

var scatterWrap = new google.visualization.ChartWrapper({
        chartType:'ScatterChart',
        containerId:'chart_div',
        dataTable:data,
        view:{
            columns:[0, 1] // This makes sure your ScatterChart won't try to use the third column for visualization, that would result in an error.
        }
    });

和这样的 ControlWrapper

var dateRangeWrap = new google.visualization.ControlWrapper({
        controlType:'DateRangeFilter',
        containerId:'dateRange',
        options:{
            filterColumnIndex:2
        }
    });

终于初始化并绑定到您的仪表板：

      var googleDashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
      googleDashboard.bind(dateRangeWrap, scatterWrap);
      googleDashboard.draw(data);

这一切都将以 this Fiddle. 结尾（请注意，您需要在 google.load 中加载 controls 而不是 corechart）。

Google 图表 Filter/Control 基于隐藏值的图表

Google Charts Filter/Control chart based on hidden value

google-visualization

gchart