javascript - 谷歌图表 : Creating summary charts after category filters have been applied (+ JSFiddle issue)

Question

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

我已经根据 Google dependent-filters 示例创建了一个示例脚本，这将有助于解释。简而言之，该数据集有两个国家(美国和法国)，每个国家有两个区域(纽约/加利福尼亚和法兰西岛/普罗旺斯)。每个区域的人口分为四个部分:深蓝色、浅蓝色、深绿色和浅绿色。

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

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

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

这是我盯着几个小时的代码补丁。我丢失了之前的一些实验 - 我主要使用饼图“ View :”部分，但一无所获后，我将它们恢复到与条形图相同的 View ，并忘记保存草稿 - 所以我不确定它会有多大帮助。尽管如此:

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

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

任何有用的评论都会受到赞赏。谢谢!

詹姆斯

Answer 1

要实现此目的，您必须聚合过滤后的数据并使用聚合数据绘制饼图。仪表板不支持这种关系，所以你必须作弊。将条形图绑定(bind)到仪表板，但不绑定(bind)饼图。然后为条形图设置一个“就绪”事件处理程序，用于获取过滤后的数据、聚合数据，并使用聚合数据绘制饼图。这是一个例子:

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