Javascript 谷歌图表：一组绑定控件-->；基于不同数据表的两个图表，通过公共列名称/值

对不起，如果标题有点冗长，但我的问题有点复杂

我有两个独立的数据表（我将它们称为

Data1

和

Data2

），我正在尝试创建一组Google Viz绑定控件，这些控件将使用

Data1

和

Data2

创建条形图。由于我希望数据呈现的方式以及Google图表中缺少透视表支持，因此将它们合并到单个数据集中是没有意义的

通常我认为这是不可能的，但在本例中，两个数据集共享一个使用相同值填充的列名。基于我在这里看到的其他示例，我认为应该可以使用一个仪表板选择控件值，并将该控件绑定到另一个仪表板中的表，只要控件的列标题在两个表中都存在

说明我的问题比解释它容易得多。下面是一个示例，下面是JavaScript：

google.load('visualization', '1.1', {packages: ['controls']});

function drawVisualization() {

// Prepare the data
var data1 = google.visualization.arrayToDataTable([
    ['Country', 'State', 'City', 'Value1','Value2','Sum'],
    ['USA' , 'New York', 'New York City', 15, 12, 27],
    ['USA', 'California', 'Los Angeles', 13, 7, 20],
    ['France', 'Provence', 'Marseilles', 16, 22, 38],
    ['France', 'Ile-de-France', 'Paris', 18, 42, 60]
]);

var data2 = google.visualization.arrayToDataTable([
    ['City', 'InfoType','Value'],
    ['New York City','Addr','123 Broadway'],
    ['New York City','Owner1','John'],
    ['New York City','Owner2','Smith'],
    ['Los Angeles','Addr','789 Hollywood'],
    ['Los Angeles','Owner1','Jill'],
    ['Los Angeles','Owner2','White'],
    ['Marseilles','Addr','753 Magritte'],
    ['Marseilles','Owner1','Marie'],
    ['Marseilles','Owner2','Poitier'],
    ['Paris','Addr','869 Ave de Champs-Elysees'],
    ['Paris','Owner1','Albert'],
    ['Paris','Owner2','Gruyere']
]);     

// Define a category picker control for the Type column

var countryPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control1',
    'options': {
        'filterColumnLabel': 'Country',
        'ui': {
            'labelStacking': 'vertical',
            'allowTyping': false,
            'allowMultiple': false,
            'allowNone': false
        }
    },
    'state':{selectedValues:['USA']}
});    

var statePicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control2',
    'options': {
        'filterColumnLabel': 'State',
        'ui': {
            'labelStacking': 'vertical',
            'allowTyping': false,
            'allowMultiple': false,
            'allowNone': false
        }
    },
    'state':{selectedValues:['New York']}
});

var cityPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control3',
    'options': {
        'filterColumnLabel': 'City',
        'ui': {
            'labelStacking': 'vertical',
            'allowTyping': false,
            'allowMultiple': false,
            'allowNone': false
        },
    'state':{selectedValues:['New York City']}
    }
});

// Define a Bar Chart
var barChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'chart1',
    'options': {
        'width': 400,
        'height': 400,
        'legend': 'none',
        'vAxis':{minValue:0},
        'hAxis':{title:''},
    },
    // Instruct the chart to show Value1, Value2, and Sum from data1
    'view': {
        'columns': [1,3,4,5]
    }
});

// Define a Table
var tableChart = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart2',
    'options': {
        'width': '400px'
    },
    // Instruct the table to show City, Addr, Owner1, and Owner2 from data2
    'view': {
        'columns': [1,2]
    }
});    

// Create a dashboard
dashone = new google.visualization.Dashboard(document.getElementById('dashboard1'));
dashtwo = new google.visualization.Dashboard(document.getElementById('dashboard2'));

// Establish bindings; cityPicker will drive both charts
dashone.bind(countryPicker, statePicker);
dashone.bind(statePicker,cityPicker);
dashone.bind(cityPicker,barChart);

dashtwo.bind(cityPicker,tableChart);

// Draw the entire dashboard.
dashone.draw(data1);
dashtwo.draw(data2);
}

google.setOnLoadCallback(drawVisualization);

正如您在小提琴中看到的，代码处于工作状态，它生成的条形图完全符合我的预期。问题是表格-我想将

City

类别过滤器与表格图表绑定，并使用

Data2

绘制它

例如：当选择

美国

和

纽约

作为国家和州时，不可见的

城市

控件应自动选择

纽约市

，而柱状图应该从

Data1

中填充

newyorkcity

的所有匹配项，这些匹配项可以在标题为

City

的

Data1

列中找到。这部分工作得很好

然后，我希望表格从

Data2

填充

newyorkcity

的所有匹配项，这些匹配项位于标题为

City

的

Data2

列中，并将匹配

Data2

行的第1列和第2列放入表格中

结果应该是一个三行两列的表，如下所示：

地址：百老汇123号

所有者1--约翰

所有者2--史密斯

然而，尽管第二个仪表板在第一个仪表板中从

City

控件中获取值似乎没有问题（我认为这可能是个问题），但表的填充没有错误，但来自

Data1

：

纽约——纽约市

即使我明确指示图表在单独的仪表板中绘制表格，使用

Data2

的draw命令……但是当代码运行时，表格是使用

Data1

数据绘制的

---

我被难住了。谁能告诉我我做错了什么吗？

不能在不同的仪表板中绑定同一个控件。将控件绑定到条形图，并为条形图创建一个“就绪”事件处理程序，该处理程序获取

cityPicker

控件的状态，根据控件状态过滤表的数据，并使用过滤后的数据绘制表

google.visualization.events.addListener(barChart, 'ready', function () {
    var city = cityPicker.getState().selectedValues[0];
    var rows = data2.getFilteredRows([{column: 0, value: city}]);
    var view = new google.visualization.DataView(data2);
    view.setRows(rows);
    tableChart.setDataTable(view);
    tableChart.draw();
});

看到它在这里工作：

请注意，如果有任何州有多个城市，则需要进一步细化