Google Charts：在应用类别过滤器后创建摘要图表（+ JSFiddle 问题）

Question

我试图弄清楚如何获取初始数据表，对其应用多个类别过滤器，并通过饼图和条形图。

我从 Google 相关过滤器示例中创建了一个示例脚本，以帮助解释。简而言之，这个数据集有两个国家（美国和法国），每个国家有两个地区（纽约/加利福尼亚和法兰西岛/普罗旺斯）。每个区域的人口分为四个部分：深蓝色、浅蓝色、深绿色和浅绿色。

这就是我想要的：当从国家和地区（例如，美国和纽约）的两个类别过滤器中进行选择时，我想要 (a) 一个条形图，显示该地区四个人口组的人口; (b) 一个饼图，显示该区域中深色和浅色之间的双向分割（使用两个切片，标记为“深色”和“浅色”）和 (c) 一个饼图，显示蓝色之间的双向分割和该区域中的绿色（也使用两个切片，标记为“蓝色”和“绿色”）。

获取 (a) 很简单，但我无法找出 (b) 和 (c) 的正确方法。我不需要一次做多个区域（例如，选择 USA 并保持区域过滤器打开，并获得纽约和卡利的汇总统计数据）。我只需要从一个地区获取四行数据并生成三个图表。

我已开始尝试在数据视图中添加计算列，但后来我意识到行数 需要更改，因此只需添加一个额外的列并不是全部需要。我需要获取类别过滤器提供给我的四行数据视图，并以某种方式将其转换为总结四行视图的两行数据视图，并为每个饼图以不同的方式执行此操作。问题是，我不知道如何做到这一点，互联网也没有帮助。

这是我盯着看了好几个小时的那段代码。我失去了一些之前的实验——我一直在玩饼图“视图：”部分，但在无处可去后，我将它们恢复到与条形图相同的视图并忘记保存草稿——所以我'不确定它会有多大帮助。尽管如此：

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、“no wrap - in(body)”、未选中的规范化 CSS 和“http://www.google.com/jsapi?fake=.js”作为外部资源，但都无济于事。要让代码传播，您要么必须在我的 JSFiddle 上挥动魔杖，要么将代码复制/粘贴到 Playground 或其他对 Google API 不那么挑剔的环境。

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

感谢任何有用的评论。谢谢！

詹姆斯

Answer 1

要完成这项工作，您必须聚合过滤后的数据并使用聚合后的数据来绘制饼图。仪表板不支持这种关系，所以你必须作弊。将 BarChart 绑定到您的仪表板，但不要绑定 PieCharts。然后为 BarChart 设置一个“就绪”事件处理程序，获取过滤后的数据，聚合它，并使用聚合数据绘制饼图。这是一个例子：

// 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();
});

在这里看到它的工作：http://jsfiddle.net/asgallant/7nLZ8/4/