如何修改Google Chart中ControlWrapper的默认提示文本与列表默认值?
Google Charts CategoryFilter 配置问题解决
问题修复点
- 默认提示文本不生效:你之前把
placeholder放在ui里是对的,但需要配合allowTyping: false确保下拉框模式下占位文本正常显示(如果开启输入模式,占位文本会变成输入框提示,和预期效果不一致)。 - 默认值设置错误:
ui里的default参数无效,Google Charts 过滤器的默认选中值必须通过state属性的selectedValues配置。
修正后的完整代码
sleep(500).then(() => { var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_curso') ); var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'filter_div_curso', 'options': { 'filterColumnLabel': 'Curso', 'ui': { 'labelStacking': 'vertical', 'placeholder': 'Seleccione un curso', // 替换默认的"Choose a value" 'label': 'Seleccione Curso', 'allowTyping': false, // 强制下拉框模式,确保占位文本显示 'allowMultiple': false // 单选模式,按需调整 } }, 'state': { 'selectedValues': ['Hola Mundo'] // 设置默认选中值,必须和Curso列的某条数据完全匹配 } }); var data = google.visualization.arrayToDataTable(JSON.parse(Base64.decode($('#curso_1').data('json')))); var chart = new google.visualization.ChartWrapper({ 'chartType': 'ColumnChart', 'containerId': 'curso_1', 'options': { title: 'Asistencia por curso', vAxis: {title: '', viewWindow: { max: 1 }}, hAxis: {title: 'Cursos'}, isStacked: 'percent', legend: { position: 'top', maxLines: 3 }, series: { 0:{color:'rgb(16, 150, 24)'}, 1:{color:'rgb(219, 68, 55)'}, 2:{color:'rgb(133, 133, 133)'}, } } }); dashboard.bind(donutRangeSlider, chart); // 确保默认状态生效 donutRangeSlider.setState(donutRangeSlider.getState()); dashboard.draw(data); });
重要提醒
- 确认
Curso列数据中存在'Hola Mundo',否则默认值无法选中(大小写、空格必须完全一致)。 - 如果需要多选,把
allowMultiple改成true,selectedValues里可以放多个值的数组,比如['值1', '值2']。
内容的提问来源于stack exchange,提问作者Enzo Nuñez Pierattini
相关产品推荐
相关产品推荐

