Google visualization 基于隐藏值的谷歌图表过滤/控制图表

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

[ '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）以基于日期列进行过滤，即使日期列实际上不在散点图中。

您可以使用

ChartWrapper

、

ControlWrapper

和

仪表板来执行此操作


基本上，你不用新的google.visualization.ScatterChart（document.getElementById（'yourId'））来创建一个图表。

你使用了一种叫做ChartWrapper的东西（在我看来，这是一种更简单、更可读的方法）

然后创建一个

ControlWrapper

（控件（日期范围筛选器）元素的包装）

最后，通过

仪表板将
控件包装器
绑定到
图表包装器
。
您的数据可能如下所示：

        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)]
    ]);

图表包装器可能如下所示：

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.
        }
    });

还有像这样的控制包装

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);

这一切都会结束（请注意，您需要在google.load中加载
控件，而不是
corechart
。
我刚刚让它开始工作！但愿我能说我是这样做的。。。会更聪明。哦，好吧。第二版！非常感谢。您可能只是更改了视图以排除包含“坏”数据的列（日期列），或者？我实际上构建了一个表并控制了该表，然后从表中抓取前两列以构建散点图。。。它工作得很好，但很可笑。从那以后，我用你们的解决方案取代了我的方法，这更合理。我缺少设置视图列的功能。这是非常重要和有价值的