谷歌图表：在应用类别过滤器后创建汇总图表（+ JSFiddle问题） [英] Google Charts: Creating summary charts after category filters have been applied (+ JSFiddle issue)

问题描述

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

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

这就是我想要的：从国家和地区的两个类别过滤器（例如美国和纽约）进行选择时，我想要（a）一个酒吧显示该地区四个人口群体的图表; （b）一张饼图，显示该地区黑暗和光明之间的双向分裂（使用两片，分别标记为黑暗和光）和（c）饼图，显示蓝调之间的双向分裂和Greens（也使用两片，分别标记为蓝色和绿色）。 （b）获得（a）很简单，但我无法弄清楚（b）和（c）的正确方法。我不需要一次执行多个区域（例如，选择美国并保持区域过滤器打开，并获得纽约和卡利汇总统计数据）。我只需要从一个地区获取四行数据并生成三个图表。

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

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

$ $ p $ google.load（'visualization'，'1.1'，{packages：['controls']}）;

函数drawVisualization（）{
//准备数据
var data = google.visualization.arrayToDataTable（[
['Country'，'Region / State' ，'颜色'，'人口']，
['USA'，'California'，'Dark Green'，700000]，
['USA'，'California'，'Light Green'，776733 ]，
['USA'，'California'，'Dark Blue'，3000000]，
['USA'，'California'，'Light Blue'，3694820]，
[纽约'，'深绿'，2000000]，
['USA'，'纽约'，'浅绿色'，657592]，
['USA'，'纽约'，'深蓝'，8000000]，
['USA'，'纽约'，'浅蓝色'，3175173]，
['France'，'Ile-de-France'，'深绿色'，2000000]，
[法国'，'Ile-de-France'，'浅绿色'，1093031]，
['法国'''法兰西岛'深蓝'，100000]，
['法国'，'Ile-de-France'，'Light蓝'，51372]，
['法国'，'普罗旺斯'，'深绿'，800000]，
['法国'，'普罗旺斯'，'浅绿色'，252395]，
['France'，'Provence'，'Dark Blue'，300000]，
['France'，'Provence'，'Light Blue'，73556]
]）;

//为'Country'，'Region / State'和'City'定义类别选择器
var countryPicker = new google.visualization.ControlWrapper（{$ b $'controlType'： 'CategoryFilter'，
'containerId'：'control1'，
'options'：{$ b $'filterColumnLabel'：'Country'，
'ui'：{
'labelStacking'：'vertical'，
'allowTyping'：false，
'allowMultiple'：false，
'allowNone'：false
}
}，
'state'：{
selectedValues：['USA']
}
}）;
$ b $ var regionPicker = new google.visualization.ControlWrapper（{$ b $'controlType'：'CategoryFilter'，$ b $'containerId'：'control2'，
'options' ：{
'filterColumnLabel'：'Region / State'，
'ui'：{
'labelStacking'：'vertical'，
'allowTyping'：false，
'allowMultiple'：false，
'allowNone'：false
}
}，
'state'：{
selectedValues：['California']
}
}）;

//定义条形图以显示'人口'数据
var barChart = new google.visualization.ChartWrapper（{
'chartType'：'BarChart'，
'containerId'：'chart1'，
'options'：{
'width'：300，
'height'：300
}，
'view' ：{
'列'：[2，3]
}
}）;
$ b $ var pieChartA = new google.visualization.ChartWrapper（{$ b $'chartType'：'PieChart'，$ b $'containerId'：'chart2'，
'options' ：{
'width'：300，
'height'：300
}，
'view'：{$ b $'columns'：[2，3]
}
}）;
$ b $ var pieChartB = new google.visualization.ChartWrapper（{$ b $'chartType'：'PieChart'，$ b $'containerId'：'chart3'，
'options' ：{
'width'：300，
'height'：300
}，
'view'：{$ b $'columns'：[2，3]
}
}）;

//创建仪表板。
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不太挑剔的环境中。

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

赞赏有用的评论。谢谢！

James

解决方案

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

  //在BarChart上使用ready事件处理程序来聚合PieCharts $ b $的数据b google.visualization.events.addListener（barChart，'ready'，function（）{
 //获取用于绘制BarChart的过滤数据
 var dt = barChart.getDataTable（）; 
 
 //通过黑暗/灯光分组数据
 var darkLightGroup = google.visualization.data.group（dt，[{
 type：'string'，
 label：dt。 getColumnLabel（2），
 column：2，
 modifier：function（val）{
 return val.split（''）[0]; 
} 
} ]，[{
类型：'数字'，
标签：dt.getColumnLabel（2），
列：3，
聚合：google.visualization.data.sum 
 $ b]]; 
 pieChartA.setDataTable（darkLightGroup）; 
 pieChartA.draw（）; 
 
 //按颜色分组数据
 var colorGroup = google。 visualization.data.group（dt，[{
类型：'字符串'，
标签：dt.getColumnLabel（2），
列：2，
修饰符：函数（val）{
返回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/

I'm trying to figure out how to take an initial data table, apply multiple category filters to it, and illustrate a combination of simple and summary statistics of the resulting data subset through pie charts and bar graphs.

I've created a sample script out of the Google dependent-filters example that will help explain. In a nutshell, this dataset has two countries (USA and France) with two regions each (New York/California and Ile-de-France/Provence). The population of each region is broken down into four components: Dark Blue, Light Blue, Dark Green, and Light Green.

Here's what I want: when selections are made from the two category filters for country and region (e.g., USA & New York), I want (a) a bar chart that shows the populations of the four population groups in that region; (b) a pie chart that shows the two-way split between Darks and Lights in that region (using two slices, labeled "Dark" and "Light") and (c) a pie chart that shows the two-way split between Blues and Greens in that region (also using two slices, labeled "Blue" and "Green").

Getting (a) is simple enough, but I can't figure out the right approach for (b) and (c). I don't need to do more than one region at once (e.g., select USA and leave the region filter open, and get summary stats for New York and Cali combined). All I need is to take four rows of data from one region and produce three charts.

I've started experimenting with adding calculated columns in the dataview but then I realized that the number of rows needs to change, so simply appending an extra column isn't all that's needed. I need to take the four-row dataview given to me by the category filters and somehow transform it into two-row dataviews that sum up the four-row view, and do it in different ways for each pie chart. Problem is, I have no idea how to do this, and the Internet isn't helping.

Here's the patch of code I've been staring at for hours. I've lost some of my prior experimentation - I've been playing mostly with the pie chart "view:" sections, but after getting nowhere I reverted them to the same view as the bar chart and forgot to save a draft - so I'm not sure how helpful it's going to be. Nonetheless:

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);

Here's the JSFiddle:

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

Unfortunately, while it's working fine in the Google Code Playground it's not working in JSFiddle. I'm using jQuery 1.8.3, "no wrap - in(body)", normalized CSS unchecked, and "http://www.google.com/jsapi?fake=.js" as an external resource, all to no avail. To get the code to propagate you'll either have to wave your magic wand over my JSFiddle or copy/paste the code to the Playground or another environment that's less finicky about Google APIs.

Also: I'm open to re-configuring the database structure if that's what it takes.

Any helpful commentary is appreciated. Thank you!

James

解决方案

To make this work, you have to aggregate the filtered data and use the aggregated data to draw your PieCharts. The Dashboards do not support this sort of relationship, so you have to cheat. Bind the BarChart to your Dashboard, but do not bind the PieCharts. Then set up a "ready" event handler for the BarChart that gets the filtered data, aggregates it, and draws the PieCharts with the aggregated data. Here's an example:

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

see it working here: http://jsfiddle.net/asgallant/7nLZ8/4/

这篇关于谷歌图表：在应用类别过滤器后创建汇总图表（+ JSFiddle问题）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！