我正在尝试根据chartwrapper(列表框)中的值过滤图表(时间轴)。
文档指出,您需要同时声明controlWrapper和chartWrapper。 我声明的时间线有些不同,我假设这就是两个元素无法正确交互的原因。
var chart = new google.visualization.Timeline(container);
var compPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
dataTable: data,
'options': {
'filterColumnLabel': 'Team',
'ui': {
'labelStacking': 'vertical',
'allowTyping': true,
'allowMultiple': true
}
}
});
dashboard.bind(compPicker, chart);
compPicker.draw();
// Draw the entire dashboard.
google.visualization.events.addListener(chart, 'ready', afterDraw);
chart.draw(data, options);
我可以成功显示控制值,但是当我选择一个时,时间轴不会过滤。
这是一个codepen: https://codepen.io/anon/pen/XQdYrm
更新:Codepen更新以反映正确的结果
答案 0 :(得分:1)
首先,将'controls'
包添加到与load
相同的'timeline'
语句中。
google.charts.load('current', {
packages:['controls', 'timeline']
}).then(function () {
接下来,需要为时间轴图表使用ChartWrapper
对象。
var chart = new google.visualization.ChartWrapper({
chartType: 'Timeline',
containerId: 'chart'
});
最后,需要绘制仪表板,而不是将控件和图表分开。
dashboard.bind(compPicker, chart);
dashboard.draw(data);
请参阅以下工作片段...
google.charts.load('current', {
packages:['controls', 'timeline']
}).then(function () {
var data = new google.visualization.DataTable({
cols: [
{id: 'team', label: 'Team', type: 'string'},
{id: 'start', label: 'Season Start Date', type: 'date'},
{id: 'end', label: 'Season End Date', type: 'date'}
],
rows: [
{c: [{v: 'Baltimore Ravens'}, {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]},
{c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
{c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
{c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
{c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
{c: [{v: 'Pittsburgh Steelers'}, {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
{c: [{v: 'Indianapolis Colts'}, {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]},
{c: [{v: 'New York Giants'}, {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
{c: [{v: 'Pittsburgh Steelers'}, {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
{c: [{v: 'New Orleans Saints'}, {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
{c: [{v: 'Green Bay Packers'}, {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
{c: [{v: 'Green Bay Packers'}, {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
{c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
{c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
{c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
{c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
{c: [{v: 'Pittsburgh Steelers'}, {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
{c: [{v: 'New York Giants'}, {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
{c: [{v: 'Pittsburgh Steelers3'}, {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
{c: [{v: 'New Orleans Saints2'}, {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
{c: [{v: 'Green Bay Packers'}, {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
{c: [{v: 'Green Bay Packers4'}, {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
{c: [{v: 'New England Patriots5'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
{c: [{v: 'Tampa Bay Buccaneers6'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
{c: [{v: 'New England Patriots7'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
{c: [{v: 'New England Patriots8'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
{c: [{v: 'Pittsburgh Steelers9'}, {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
{c: [{v: 'New York Giants10'}, {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
{c: [{v: 'Pittsburgh Steelers11'}, {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
{c: [{v: 'New Orleans Saints12'}, {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
{c: [{v: 'Green Bay Packers13'}, {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
{c: [{v: 'Green Bay Packers14'}, {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
{c: [{v: 'New England Patriots15'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
{c: [{v: 'Tampa Bay Buccaneers16'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
{c: [{v: 'New England Patriots17'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
{c: [{v: 'New England Patriots18'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
{c: [{v: 'Pittsburgh Steelers19'}, {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
]
});
var options = {
height: 1300,
timeline: {
groupByRowLabel: true
},
width: 1800
};
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var chart = new google.visualization.ChartWrapper({
chartType: 'Timeline',
containerId: 'chart'
});
var compPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control2',
options: {
filterColumnLabel: 'Team',
ui: {
labelStacking: 'vertical',
allowTyping: true,
allowMultiple: true
}
}
});
dashboard.bind(compPicker, chart);
dashboard.draw(data);
});
#header {
height: 0px;
position: relative;
-webkit-overflow-scrolling: touch;
display: block;
top: 0px;
margin-top: 0px;
z-index: 99;
float: top;
}
#chart {
-webkit-overflow-scrolling: touch;
margin-top: 57px;
}
.scroll {
max-width: 100%;
-webkit-overflow-scrolling: touch;
height: 100%;
overflow-y: scroll;
}
.inline {
display: inline-block;
vertical-align: top;
-webkit-overflow-scrolling: touch;
}
.nowrap {
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="control2"></div>
<div class="nowrap">
<div class="inline" id="labels"></div>
<div class="inline scroll">
<div id="header"></div>
<div id="chart"></div>
</div>
</div>
</div>