基于Google Charts实现堆叠柱状图的图例点击切换系列功能

技术栈 #

• SuiteCRM 7.8
• PHP 5.5
• kReporter v3.1
• Google Charts插件

需求 #

为堆叠柱状图添加交互功能：点击图例项可隐藏对应系列并更新图表，再次点击则恢复显示。

尝试实现的代码 #

// 针对Combo图表的配置
if ($thisParams['type'] == 'Combo') {
    $googleChart['options']['seriesType'] = 'bars';

    // 遍历系列配置
    foreach ($thisParams['dataseries'] as $seriesId => $seriesData) {
        $googleChart['options']['series'][$seriesId] = array(
            'type' => (empty($seriesData['renderer']) ? 'bars' : $seriesData['renderer']),
            'targetAxisIndex' => ($seriesData['axis'] == 'S' ? 1 : 0)
        );
    }

    // 配置图例点击事件相关参数
    $googleChart['options']['legend'] = array(
        'position' => 'right',
        'clickable' => true,
        'textStyle' => array(
            'fontSize' => 16
        ),
        'selected' => array()
    );

    // 设置初始所有系列为显示状态
    foreach ($thisParams['dataseries'] as $seriesId => $seriesData) {
        $googleChart['options']['legend']['selected'][$seriesData['label']] = true;
    }

    // 添加图例切换的事件监听器
    $googleChart['events'] = array(
        'select' => 'function() {
            var selection = chart.getSelection();
            if (selection.length > 0 && selection[0].row === null) {
                var column = selection[0].column;
                if (typeof columns[column] == "number") {
                    columns[column] = {
                        label: data.getColumnLabel(column),
                        type: data.getColumnType(column),
                        calc: function () {
                            return null;
                        }
                    };
                } else {
                    columns[column] = column;
                }
                var view = new google.visualization.DataView(data);
                view.setColumns(columns);
                chart.draw(view, options);
            }
        }'
    );
}

代码说明 #

• 针对Combo类型图表配置了基础柱状图系列类型
• 启用图例可点击属性，并初始化所有系列为显示状态
• 通过select事件监听图例点击，判断点击对象为图例项（row === null）后，切换对应数据列的显示状态：将列转为返回null的计算项实现隐藏，恢复为列索引实现显示，最后通过DataView重新渲染图表

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