You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何修改Google Chart中ControlWrapper的默认提示文本与列表默认值?

Google Charts CategoryFilter 配置问题解决

问题修复点

  1. 默认提示文本不生效:你之前把placeholder放在ui里是对的,但需要配合allowTyping: false确保下拉框模式下占位文本正常显示(如果开启输入模式,占位文本会变成输入框提示,和预期效果不一致)。
  2. 默认值设置错误: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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.26 16:53:15