GWT环境下为Google StackedColumnChart添加类别筛选的最优方案

你使用com.googlecode.gwt-charts 0.9.10和com.google.gwt.google-apis 1.0.2版本，希望给StackedColumnChart添加筛选控件，让用户选择显示哪些类别（如apples、pears、oranges）。你的测试数据表结构如下：

DataTable dataTable = DataTable.create();
dataTable.addColumn(ColumnType.STRING, "event");
dataTable.addColumn(ColumnType.NUMBER, "apples");
dataTable.addColumn(ColumnType.NUMBER, "pears");
dataTable.addColumn(ColumnType.NUMBER, "oranges");

for(int i=0;i<5;i++)
{
    int row = dataTable.addRow() ;
    dataTable.setValue(row, 0, "E"+i);
    dataTable.setValue(row, 1, i+1);
    dataTable.setValue(row, 2, i+2);
    dataTable.setValue(row, 3, i+3);
}

你发现CategoryFilter不适用，因为它是针对行维度的筛选（比如过滤event列的不同值），而你需要的是列维度的选择（控制哪些数值列显示在堆叠柱形图中）。

最优实现方案：自定义多选控件+DataView动态更新 #

由于gwt-charts的内置筛选控件主要针对行数据过滤，针对列维度的筛选，最直接灵活的方式是自定义多选控件，结合DataView动态修改图表显示的列。

步骤1：创建多选筛选控件 #

在你的UI中添加一个多选组，对应要筛选的所有类别：

// 保存原始数据表为类成员变量，方便后续复用
private DataTable originalDataTable;
private StackedColumnChart stackedColumnChart;
private ColumnChartOptions chartOptions;

// 创建多选筛选控件
CheckboxGroup categorySelector = new CheckboxGroup();
categorySelector.addItem("apples", "apples");
categorySelector.addItem("pears", "pears");
categorySelector.addItem("oranges", "oranges");
// 默认全选所有类别
categorySelector.selectAll();

// 监听选择变化事件，触发图表更新
categorySelector.addValueChangeHandler(event -> updateStackedChart());

步骤2：实现图表更新逻辑 #

通过DataView从原始数据表中筛选出用户选中的列，再更新图表：

private void updateStackedChart() {
    Set<String> selectedCategories = categorySelector.getSelectedValues();
    
    // 创建DataView基于原始数据表
    DataView filteredView = DataView.create(originalDataTable);
    
    // 构建要保留的列：首先保留event列（索引0）
    List<Integer> keepColumns = new ArrayList<>();
    keepColumns.add(0);
    
    // 遍历所有数值列，添加用户选中的列
    for (int colIndex = 1; colIndex < originalDataTable.getNumberOfColumns(); colIndex++) {
        String colLabel = originalDataTable.getColumnLabel(colIndex);
        if (selectedCategories.contains(colLabel)) {
            keepColumns.add(colIndex);
        }
    }
    
    // 设置DataView显示的列
    filteredView.setColumns(keepColumns.toArray(new Integer[0]));
    
    // 更新图表
    stackedColumnChart.draw(filteredView, chartOptions);
}

步骤3：初始化图表 #

在初始化时加载原始数据并绘制初始图表：

// 初始化原始数据表（即你提供的测试数据代码）
originalDataTable = DataTable.create();
originalDataTable.addColumn(ColumnType.STRING, "event");
originalDataTable.addColumn(ColumnType.NUMBER, "apples");
originalDataTable.addColumn(ColumnType.NUMBER, "pears");
originalDataTable.addColumn(ColumnType.NUMBER, "oranges");

for(int i=0;i<5;i++)
{
    int row = originalDataTable.addRow() ;
    originalDataTable.setValue(row, 0, "E"+i);
    originalDataTable.setValue(row, 1, i+1);
    originalDataTable.setValue(row, 2, i+2);
    originalDataTable.setValue(row, 3, i+3);
}

// 初始化图表选项
chartOptions = ColumnChartOptions.create();
chartOptions.setIsStacked(true);
chartOptions.setTitle("Fruit Events");

// 初始化并绘制图表
stackedColumnChart = new StackedColumnChart();
stackedColumnChart.draw(originalDataTable, chartOptions);

方案优势 #

• 完全匹配需求：精确控制堆叠柱形图显示哪些类别列
• 实现简单，无需依赖复杂的仪表盘控件
• 灵活度高：可以自定义多选控件的样式、布局，甚至扩展为下拉多选等其他形式

内容的提问来源于stack exchange，提问作者Dave Breeze