Google Charts：如何在饼图切片中优雅地显示百分比符号

// 确保 Google Charts 库已加载
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(initializeCharts); // 或者在数据准备好后调用 drawChartISLA

function initializeCharts() {
    // 初始图表绘制逻辑，这里省略，假设 drawChartISLA 会被其他事件触发
}

function drawChartISLA(updatedDataISLA) {
    // ... (主饼图的数据和绘制逻辑，如果需要，也可以对主饼图的数据进行格式化)

    var chart = new google.visualization.PieChart(document.getElementById('IR-SLA'));
    chart.draw(data, options);

    google.visualization.events.addListener(chart, 'select', selectHandler);

    function selectHandler() {
        var selection = chart.getSelection()[0];
        if (selection) {
            var sliceName = data.getValue(selection.row, 0);
            // 获取S1, S2, S3, S4的百分比值
            var sliceS1 = data.getValue(selection.row, 2);
            var sliceS2 = data.getValue(selection.row, 3);
            var sliceS3 = data.getValue(selection.row, 4);
            var sliceS4 = data.getValue(selection.row, 5);

            // 创建用于弹出饼图的数据表
            var sliceData = new google.visualization.DataTable();
            sliceData.addColumn('string', 'Severity');
            sliceData.addColumn('number', 'Incident Count'); // 这一列将显示百分比值
            sliceData.addRow(['S1', sliceS1]);
            sliceData.addRow(['S2', sliceS2]);
            sliceData.addRow(['S3', sliceS3]);
            sliceData.addRow(['S4', sliceS4]);

            // **关键步骤：创建并应用 NumberFormat**
            var percentFormat = new google.visualization.NumberFormat({
                fractionDigits: 0, // 不显示小数位，根据需要调整
                suffix: '%'        // 在数字后添加百分号
            });

            // 将格式应用到数据表的第二列（索引为1，即 'Incident Count' 列）
            percentFormat.format(sliceData, 1);

            // 设置弹出饼图的选项
            var sliceOptions = {
                'title': sliceName + ' SLA met percentage - ',
                pieSliceText: 'value', // 确保显示格式化后的值
                'width': 500,
                'height': 300,
                is3D: true,
                'tooltip': {
                    'text': 'value' // 鼠标悬停时的提示也会显示格式化后的值
                }
            };

            // 打开弹出窗口并绘制饼图
            var popup = window.open('', 'myPopup', 'width=600,height=400');
            popup.document.write('<div style="margin:auto" id="slice_chart_div"></div>');
            centerPopup(popup); // 居中弹出窗口的函数

            var sliceChart = new google.visualization.PieChart(popup.document.getElementById('slice_chart_div'));
            sliceChart.draw(sliceData, sliceOptions);
        }
    }

    // 居中弹出窗口的辅助函数
    function centerPopup(popup) {
        var left = (screen.width - popup.outerWidth) / 2;
        var top = (screen.height - popup.outerHeight) / 2;
        popup.moveTo(left, top);
    }
}