Question

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

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

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

获得（a）很简单，但我无法找到（b）和（c）的正确方法。我不需要同时执行多个区域（例如，选择美国并保持区域过滤器打开，并获得纽约和卡利组合的摘要统计数据）。我只需要从一个区域获取四行数据并生成三个图表。

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

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

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不那么挑剔的环境。

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

任何有用的评论表示赞赏。谢谢！

詹姆斯

Answer 1

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

// 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/

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

1 个答案: