[英]Google chart : filter GeoChart
我正在尝试使用ControlWrapper过滤数据以显示在仪表板内的GeoChart上。 问题如下:我必须具有三列:“国家”,“值”和“季度”。 现在,我只想显示四分之一的信息,这要归功于CategoryPicker。 然后,我要使用仪表板功能,将选择器与我的GeoChart绑定。 但是,我无法显示我的GeoChart,因为它会引发错误,因为我使用了三列,而我应该只有两列...
我知道诀窍是使用DataView并隐藏第三列,但随后无法链接过滤器和我的地理图表。
这里有解决方法吗? 我的部分代码可以在下面找到。 顺便说一句,这适用于其他类型的图表,但不适用于GeoChart ...为什么?
预先,非常感谢您的帮助!
var data = response.getDataTable();
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var quarterSelector = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Quarter',
ui: {
allowTyping: false,
allowMultiple: false,
allowNone: false
},
'chartView': {
'columns': [0,1]
},
}
});
var mapChart = new google.visualization.ChartWrapper({
'chartType': 'GeoChart',
'containerId': 'regions_div',
'options': {
'displayMode': 'regions',
'region': '150',
'view': {'columns':[0,1]}
}
});
dashboard.bind(quarterSelector, mapChart);
dashboard.draw(data);
第一, chartView
是部分ui
上ChartRangeFilter -不CategoryFilter
此外, view: {'columns':[0,1]}
不应该是options
一部分
但与options
, chartType
和containerId
处于同一级别
但是,这里都不应该...
google.charts.load('current', { packages: ['controls', 'geochart'], callback: drawChart }); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity', 'Quarter'], ['Germany', 200, 1], ['United States', 300, 2], ['Brazil', 400, 3], ['Canada', 500, 4], ['France', 600, 3], ['RU', 700, 2] ]); var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); var quarterSelector = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'filter_div', options: { filterColumnLabel: 'Quarter', ui: { allowTyping: false, allowMultiple: false, allowNone: false } } }); var mapChart = new google.visualization.ChartWrapper({ chartType: 'GeoChart', containerId: 'regions_div', options: { displayMode: 'regions' } }); dashboard.bind(quarterSelector, mapChart); dashboard.draw(data); }
<script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://www.google.com/jsapi"></script> <div id="dashboard_div"> <div id="filter_div"></div> <div id="regions_div"></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.