Google图表:在应用类别过滤器后创建汇总图表(+ JSFiddle问题)

我正在尝试弄清楚如何使用初始数据表，对其应用多个类别过滤器，并通过饼图和条形图说明结果数据子集的简单和汇总统计的组合。

我从Google依赖过滤器的例子中创建了一个示例脚本，它将有助于解释。简而言之，这个数据集有两个国家(美国和法国)，每个国家有两个地区(纽约/加利福尼亚和法兰西岛/普罗旺斯)。每个地区的人口分为四个部分:深蓝、浅蓝、深绿和浅绿。

这是我想要的:当从国家和地区的两个类别过滤器中进行选择时(例如，USA &纽约)，我想要(a)一个条形图，显示该地区四个人口群体的人口;(b)一个饼状图，显示该区域的深色和浅色之间的双向分裂(使用两个切片，标记为"深色"answers"浅色")和(c)一个饼状图，显示该区域的蓝色和绿色之间的双向分裂(也使用两个切片，标记为"蓝色"answers"绿色")。

获取(a)足够简单，但我无法找出(b)和(c)的正确方法。我不需要一次执行多个区域(例如，选择美国并将区域过滤器打开，并获得纽约和加州的汇总统计数据)。我所需要的就是从一个地区取四行数据并生成三个图表。

我已经开始尝试在dataview中添加计算列，但后来我意识到行的数量需要改变，所以简单地附加一个额外的列并不是所有需要的。我需要接受类别过滤器给我的四行数据视图，并以某种方式将其转换为汇总了四行视图的两行数据视图，并以不同的方式对每个饼图执行此操作。问题是，我不知道该怎么做，网络也帮不上忙。

这是我盯了几个小时的代码补丁。我丢失了之前的一些实验——我一直在使用饼图"视图"部分，但在一无所获之后，我将它们恢复到与条形图相同的视图，并且忘记保存草稿——所以我不确定它会有多大帮助。然而:

google.load('visualization', '1.1', {packages: ['controls']});
function drawVisualization() {
    // Prepare the data
var data = google.visualization.arrayToDataTable([
    ['Country', 'Region/State', 'Color', 'Population'],
    ['USA', 'California', 'Dark Green', 700000],
    ['USA', 'California', 'Light Green', 776733],
    ['USA', 'California', 'Dark Blue', 3000000],
    ['USA', 'California', 'Light Blue', 3694820],
    ['USA', 'New York', 'Dark Green', 2000000],
    ['USA', 'New York', 'Light Green', 657592],
    ['USA', 'New York', 'Dark Blue', 8000000],
    ['USA', 'New York', 'Light Blue', 3175173],
    ['France', 'Ile-de-France', 'Dark Green', 2000000],
    ['France', 'Ile-de-France', 'Light Green', 1093031],
    ['France', 'Ile-de-France', 'Dark Blue', 100000],
    ['France', 'Ile-de-France', 'Light Blue', 51372],
    ['France', 'Provence', 'Dark Green', 800000],
    ['France', 'Provence', 'Light Green', 252395],
    ['France', 'Provence', 'Dark Blue', 300000],
    ['France', 'Provence', 'Light Blue', 73556] 
]);
// Define category pickers for 'Country', 'Region/State' and 'City'
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 regionPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control2',
    'options': {
        'filterColumnLabel': 'Region/State',
        'ui': {
            'labelStacking': 'vertical',
            'allowTyping': false,
            'allowMultiple': false,
            'allowNone': false
        }
    },
        'state': {
        selectedValues: ['California']
    }
});
// Define a bar chart to show 'Population' data
var barChart = new google.visualization.ChartWrapper({
    'chartType': 'BarChart',
    'containerId': 'chart1',
'options': {
  'width': 300,
  'height': 300
    },
    'view': {
        'columns': [2, 3]
    }
});
var pieChartA = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart2',
'options': {
  'width': 300,
  'height': 300
},
    'view': {
        'columns': [2, 3]
    }
});
var pieChartB = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart3',                
'options': {
  'width': 300,
  'height': 300
},
    'view': {
        'columns': [2, 3]
    }
});
// Create the dashboard.
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
dash.bind(countryPicker, regionPicker);
dash.bind(regionPicker, [barChart, pieChartA, pieChartB]);
dash.draw(data);
}
google.setOnLoadCallback(drawVisualization);

这是JSFiddle:

http://jsfiddle.net/james_twc/7nLZ8/

不幸的是，虽然它在Google Code Playground中工作得很好，但在JSFiddle中却不能工作。我使用的是jQuery 1.8.3，"无正文"，未检查的规范化CSS，以及"http://www.google.com/jsapi?fake=.js"作为外部资源，所有这些都无济于事。要使代码传播，您要么必须在我的JSFiddle上挥动您的魔杖，要么将代码复制/粘贴到Playground或其他对Google api不那么挑剔的环境中。

也:如果需要的话，我愿意重新配置数据库结构。

感谢任何有帮助的评论。谢谢你！

詹姆斯

// use a "ready" event handler on the BarChart to aggregate the data for the PieCharts
google.visualization.events.addListener(barChart, 'ready', function () {
    // get the filtered data used to draw the BarChart
    var dt = barChart.getDataTable();
    // group data by dark/light
    var darkLightGroup = google.visualization.data.group(dt, [{
        type: 'string',
        label: dt.getColumnLabel(2),
        column: 2,
        modifier: function (val) {
            return val.split(' ')[0];
        }
    }], [{
        type: 'number',
        label: dt.getColumnLabel(2),
        column: 3,
        aggregation: google.visualization.data.sum
    }]);
    pieChartA.setDataTable(darkLightGroup);
    pieChartA.draw();
    // group data by color
    var colorGroup = google.visualization.data.group(dt, [{
        type: 'string',
        label: dt.getColumnLabel(2),
        column: 2,
        modifier: function (val) {
            return val.split(' ')[1];
        }
    }], [{
        type: 'number',
        label: dt.getColumnLabel(2),
        column: 3,
        aggregation: google.visualization.data.sum
    }]);
    pieChartB.setDataTable(colorGroup);
    pieChartB.draw();
});