如何在Google Charts分组条形图右侧/图例位置显示各组条形总数

我正在使用Google Charts制作分组条形图，目前图表右侧图例显示的是interface和functional组的单个NASC、FASC条目，但我希望修改为分别显示这两组的条形总数。具体来说，替换图例中的单个NASC、FASC值，改为展示interface组和functional组各自的条形总数。请问需要对以下代码做出哪些修改才能实现该需求？

当前状态：

期望效果：

相关原始代码：

<!DOCTYPE html>
<html>
<head>
    <title>Grouped Bar Chart Example</title>
    <!-- Load Google Charts library -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawBarGroupChart(containerId, chartData, title, defect) {
            // Convert javaData object into an array of arrays
            var data = [];
            var types = Object.keys(chartData);
            var defects = {};
            var jiraData = chartData;

            // Collect all unique defect keys
            types.forEach(function (type) {
                Object.assign(defects, chartData[type]);
            });

            // Create the header row
            var headerRow = ['Type'];
            Object.keys(defects).forEach(function (defect) {
                headerRow.push(defect);
            });
            data.push(headerRow);

            // Populate data rows
            types.forEach(function (type) {
                var row = [type];
                Object.keys(defects).forEach(function (defect) {
                    row.push(chartData[type][defect] || 0);
                });
                data.push(row);
            });

            var chartData = google.visualization.arrayToDataTable(data);

            var options = {
                title: 'Total Days to resolve defect',
                vAxis: { title: 'Days' },
                hAxis: { title: 'Type' },
                seriesType: 'bars',
                series: {}
            };

            var index = 0;
            defect.forEach(function (defect) {
                var groupSize = Object.keys(jiraData[defect.defectType]).length;
                for (var i = 0; i < groupSize; i++) {
                    options.series[index++] = { color: defect.color };
                }
            });

            // Set the width of the bars
            options.bar = { groupWidth: '100%' };  // Adjust the width as needed
            
            

            var chart = new google.visualization.ComboChart(document.getElementById(containerId));
            chart.draw(chartData, options);
        }

        function drawChart() {
            // Sample data for chartData
            var chartData = {
                'interface': {
                    'NASC-1': 1,
                    'NASC-2': 2,
                    'NASC-3': 1,
                    'NASC-4': 2,
                    'NASC-5': 1,
                    'NASC-6': 2,
                    'NASC-7': 1,
                    'NASC-8': 2,
                    'NASC-9': 1,
                    'NASC-10': 2,
                    'NASC-13': 1,
                    'NASC-14': 2,
                    'NASC-15': 1,
                    'NASC-16': 2,
                    'NASC-17': 1,
                    'NASC-18': 2,
                    'NASC-26': 2,
                    'NASC-27': 1,
                    'NASC-28': 2,
                    'NASC-29': 1,
                    'NASC-20': 2,
                    'NASC-23': 1,
                    'NASC-124': 2,
                    'NASC-25': 1,
                    'NASC-26': 2,
                    'NASC-27': 1,
                    'NASC-28': 2
                },
                'functional': {
                    'FASC-1': 1,
                    'FASC-2': 2,
                    'FASC-3': 1
                }
            };

            // Sample data for defect
            var defect = [
                { defectType: 'functional', color: 'grey' },
                { defectType: 'interface', color: 'orange' }
            ];

            drawBarGroupChart('chart_div', chartData, 'Total Days to resolve defect', defect);
        }
    </script>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <!-- Bootstrap container -->
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <!-- Chart container -->
                <div id="chart_div" style="height: 500px;"></div>
            </div>
            <div class="col-md-6">
                <!-- Additional content in the second column -->
                <p>Additional content in the second column</p>
            </div>
        </div>
    </div>

    <!-- Load Google Charts library -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <!-- Load Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

要实现需求，需要调整数据结构和图例配置，核心是将原有的单缺陷列聚合为分组列，并自定义图例显示：

具体修改点 #

1. 重构数据处理逻辑：不再拆分单个缺陷为数据列，而是直接按interface和functional分组，计算每组的条形总数（即缺陷数量）
2. 自定义图例：通过options.legend手动指定图例的名称和颜色，替代自动生成的单条目标签
3. 简化颜色配置：数据列变为两组，直接为每组分配对应颜色即可

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Grouped Bar Chart Example</title>
    <!-- Load Google Charts library -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawBarGroupChart(containerId, chartData, title, defectConfig) {
            // 重构数据：按组聚合，列对应interface和functional，值为每组的缺陷数量（条形总数）
            var data = [
                ['Type', 'interface', 'functional']
            ];
            
            // 填充每组的条形总数
            Object.keys(chartData).forEach(function(type) {
                var defectCount = Object.keys(chartData[type]).length;
                data.push([type, defectCount]);
            });

            var chartDataTable = google.visualization.arrayToDataTable(data);

            // 配置选项：自定义图例、颜色
            var options = {
                title: 'Total Days to resolve defect',
                vAxis: { title: 'Days' },
                hAxis: { title: 'Type' },
                seriesType: 'bars',
                // 自定义图例项
                legend: {
                    position: 'right',
                    labels: {
                        values: [
                            'interface (' + Object.keys(chartData['interface']).length + ')',
                            'functional (' + Object.keys(chartData['functional']).length + ')'
                        ]
                    }
                },
                // 为每组分配颜色
                series: {
                    0: { color: defectConfig.find(item => item.defectType === 'interface').color },
                    1: { color: defectConfig.find(item => item.defectType === 'functional').color }
                },
                bar: { groupWidth: '100%' }
            };

            var chart = new google.visualization.ComboChart(document.getElementById(containerId));
            chart.draw(chartDataTable, options);
        }

        function drawChart() {
            // Sample data for chartData
            var chartData = {
                'interface': {
                    'NASC-1': 1,
                    'NASC-2': 2,
                    'NASC-3': 1,
                    'NASC-4': 2,
                    'NASC-5': 1,
                    'NASC-6': 2,
                    'NASC-7': 1,
                    'NASC-8': 2,
                    'NASC-9': 1,
                    'NASC-10': 2,
                    'NASC-13': 1,
                    'NASC-14': 2,
                    'NASC-15': 1,
                    'NASC-16': 2,
                    'NASC-17': 1,
                    'NASC-18': 2,
                    'NASC-26': 2,
                    'NASC-27': 1,
                    'NASC-28': 2,
                    'NASC-29': 1,
                    'NASC-20': 2,
                    'NASC-23': 1,
                    'NASC-124': 2,
                    'NASC-25': 1,
                    'NASC-26': 2,
                    'NASC-27': 1,
                    'NASC-28': 2
                },
                'functional': {
                    'FASC-1': 1,
                    'FASC-2': 2,
                    'FASC-3': 1
                }
            };

            // Sample data for defect config
            var defectConfig = [
                { defectType: 'functional', color: 'grey' },
                { defectType: 'interface', color: 'orange' }
            ];

            drawBarGroupChart('chart_div', chartData, 'Total Days to resolve defect', defectConfig);
        }
    </script>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <!-- Bootstrap container -->
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <!-- Chart container -->
                <div id="chart_div" style="height: 500px;"></div>
            </div>
            <div class="col-md-6">
                <!-- Additional content in the second column -->
                <p>Additional content in the second column</p>
            </div>
        </div>
    </div>

    <!-- Load Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

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