使用Google Charts绘制带Chart Range Filter的柱状图报错求助

错误原因分析 #

• 错误2是核心根源：ChartRangeFilter仅能作用于连续型数据列（number/date/datetime/timeofday类型），且该列必须属于domain角色（即坐标轴的域列）。你当前指定过滤第0列（Name，字符串类型），完全不符合要求，直接触发了错误1（绘制失败）。

解决方案 #

根据你的需求选择以下两种方案之一：

方案1：改用CategoryFilter（适配字符串类别过滤） #

如果需求是筛选特定名称的条目，CategoryFilter是专门处理字符串分类数据的控件，替换ChartRangeFilter即可解决问题：

<div id="dashboard" class="container-fluid" style="height:100%">
    <div id="chart_div" style="height:99%"></div>
    <div id="filter-range" style="height:1%"></div>
</div>

<script type="text/javascript">
google.charts.load('current', { packages: ['corechart', 'controls'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Name', 'Donuts eaten', 'Donuts eaten'],
        ['Michael', 5, 6],
        ['Elisa', 7, 6],
        ['Robert', 3, 7],
        ['John', 2, 8],
        ['Jessica', 6, 9],
        ['Aaron', 1, 20],
        ['Margareth', 8, 8]
    ]);

    // 替换为CategoryFilter
    var categoryFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'filter-range',
        options: {
            filterColumnIndex: 0,
            ui: {
                labelStacking: 'vertical',
                allowTyping: false,
                allowMultiple: true,
                allowNone: true,
                selectedValuesLayout: 'belowStacked'
            }
        }
    });

    var chart = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart_div',
        options: {
            width: '100%',
            height: 450,
            legend: {
                alignment: 'end',
                position: 'top'
            },
            animation: {
                duration: 500,
                easing: 'in',
                startup: true
            },
            chartArea: {
                top: 36,
                left: 36,
                right: 18,
                bottom: 36
            },
            isStacked: true,
            bar: { groupWidth: '95%' },
            colors: ['#ff7900', '#50be87']
        }
    });

    var dashboard = new google.visualization.Dashboard(document</think_never_used_51bce0c785ca2f68081bfa7d91973934>.getElementById('dashboard'));
    dashboard.bind(categoryFilter, chart);
    dashboard.draw(data);
}
</script>

方案2：保留ChartRangeFilter，新增连续型过滤列 #

如果必须使用ChartRangeFilter，需要添加一列连续型数据（比如序号）作为过滤列，将Name列设为标签列，既满足过滤要求，又不影响图表显示效果：

<div id="dashboard" class="container-fluid" style="height:100%">
    <div id="chart_div" style="height:99%"></div>
    <div id="filter-range" style="height:1%"></div>
</div>

<script type="text/javascript">
google.charts.load('current', { packages: ['corechart', 'controls'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    // 新增序号列作为domain列，Name设为标签
    var data = google.visualization.arrayToDataTable([
        ['Index', 'Name', 'Donuts eaten', 'Donuts eaten'],
        [1, 'Michael', 5, 6],
        [2, 'Elisa', 7, 6],
        [3, 'Robert', 3, 7],
        [4, 'John', 2, 8],
        [5, 'Jessica', 6, 9],
        [6, 'Aaron', 1, 20],
        [7, 'Margareth', 8, 8]
    ]);

    var rangeFilter = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'filter-range',
        options: {
            // 过滤新增的序号列（索引0）
            filterColumnIndex: 0,
            ui: {
                chartType: 'ColumnChart',
                chartOptions: {
                    height: 40,
                    colors: ['#ff7900', '#50be87'],
                    chartArea: {
                        width: '100%',
                        height: '100%',
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0
                    }
                }
            }
        }
    });

    var chart = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart_div',
        // 指定图表展示的列：Name作为x轴，后面两列作为数据
        view: {
            columns: [1, 2, 3]
        },
        options: {
            width: '100%',
            height: 450,
            legend: {
                alignment: 'end',
                position: 'top'
            },
            animation: {
                duration: 500,
                easing: 'in',
                startup: true
            },
            chartArea: {
                top: 36,
                left: 36,
                right: 18,
                bottom: 36
            },
            isStacked: true,
            bar: { groupWidth: '95%' },
            colors: ['#ff7900', '#50be87']
        }
    });

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dashboard.bind(rangeFilter, chart);
    dashboard.draw(data);
}
</script>

关键说明 #

• ChartRangeFilter的设计初衷是处理连续区间过滤（如数字范围、日期范围），不支持字符串类别的离散过滤，这是控件的核心限制。
• 修复第二个错误后，第一个“绘制失败”的错误会自动消失，因为根源问题已解决。

内容的提问来源于stack exchange，提问作者Boufous Otman