基于隐藏值的谷歌图表过滤器/控制图答案

【问题标题】：Google Charts Filter/Control chart based on hidden value基于隐藏值的谷歌图表过滤器/控制图
【发布时间】：2015-11-23 13:41:18
【问题描述】：

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

[ '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）来根据日期列进行过滤，即使日期列并不是散点图的真正部分。

【问题讨论】：

标签： google-visualization gchart

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

【讨论】：

我刚刚开始工作！希望我能说我是这样做的……会更聪明。那好吧。第 2 版！非常感谢。
您可能只是更改了视图以排除具有“不良”数据的列（日期列），或者？
我实际上建立了一个表格并控制了表格，然后从表格中抓取了前两列来构建散点图......它工作得很好，但很荒谬。此后，我用您的解决方案替换了我的方法，这更有意义。我错过了设置视图列的能力。这是非常重要和有价值的