优化 Google 饼图：为切片值添加百分比符号的专业指南-js教程-PHP中文网

优化 Google 饼图：为切片值添加百分比符号的专业指南

本教程旨在指导开发者如何在 google 饼图的切片值旁精确地添加百分比符号，从而提升数据可视化效果。文章首先分析了直接在后端进行字符串拼接的局限性，并推荐采用 google charts 内置的 `google.visualization.numberformat` 类进行数据格式化。通过详细的代码示例和步骤，您将学习如何配置 `fractiondigits` 和 `suffix` 等属性，确保图表数据以专业且易读的百分比形式呈现，同时保持工具提示的一致性。

引言

Google Charts 是一个功能强大且高度可定制的 JavaScript 图表库，广泛应用于网页数据可视化。在绘制饼图时，为了直观地展示各数据切片所占的比例，通常需要在切片上直接显示百分比数值。然而，许多开发者在尝试为这些数值添加百分比符号时，可能会遇到一些挑战，例如直接在数据库查询中拼接 '%' 符号，导致图表无法正确渲染或数据类型错误。本文将深入探讨如何在 Google 饼图中优雅地实现百分比符号的添加，确保数据的准确性和展示的专业性。

问题分析：为什么直接拼接字符不可行？

在 Google Charts 中，数据通常通过 google.visualization.DataTable 对象进行管理。这个数据表期望接收特定类型的数据，例如数值（'number'）、字符串（'string'）、日期（'date'）等。当您在数据库查询中将数值（如 90）与百分比符号拼接成字符串（如 '90%'）后，再将其传递给 DataTable 的数值列时，图表库会尝试将这个字符串解析为数字。由于 '90%' 并非一个纯粹的数字，解析过程可能会失败，导致图表无法正常绘制，或者在最坏的情况下，图表会将这些值视为零或忽略它们，从而显示不正确的数据。

Google Charts 内部需要数值类型的数据来进行各种计算，包括切片大小的确定、百分比的内部计算（如果 pieSliceText 设置为 'percentage'）以及工具提示的渲染。因此，最佳实践是在数据加载到前端后，利用 Google Charts 提供的专用格式化工具来处理显示层面的格式化。

解决方案：使用 google.visualization.NumberFormat

google.visualization.NumberFormat 类是 Google Charts 专门为数字数据格式化而设计的工具。它允许您在不改变底层数值的情况下，灵活地控制数字的显示方式，例如添加前缀、后缀、指定小数位数、使用千位分隔符等。

使用 NumberFormat 的核心步骤如下：

创建 NumberFormat 实例，并配置所需的格式化选项。
将这个格式化器应用到 DataTable 中需要格式化的特定列。

实施步骤与代码示例

我们将针对原始问题中的两个饼图（主饼图和点击切片后弹出的二级饼图）分别进行格式化。

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

步骤 1：创建 NumberFormat 实例

首先，在您的 JavaScript 代码中，创建一个 google.visualization.NumberFormat 实例。我们将配置它来显示零小数位并在数字后添加百分比符号。

// 创建一个 NumberFormat 实例，用于添加百分比符号
var percentFormat = new google.visualization.NumberFormat({
  fractionDigits: 0, // 不显示小数位
  suffix: '%'        // 在数字后添加百分号
});

登录后复制

fractionDigits: 0：指定数字显示的小数位数为 0。根据您的后端查询，百分比值已经乘以了 100，通常是整数。
suffix: '%'：指定在格式化后的数字后面添加一个 '%' 符号。

步骤 2：应用格式化到主饼图数据

在 drawChartISLA 函数中，数据通过 data.addRows(updatedDataISLA); 添加到 DataTable 后，但在 chart.draw(data, options); 之前，应用 percentFormat 到表示百分比的列。根据提供的代码，主饼图的百分比数据位于 data.addColumn('number', 'count');，这是数据表中的第二列（索引为 1）。

function drawChartISLA(updatedDataISLA) {
    // 创建数据表
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'opco_name');
    data.addColumn('number', 'count'); // 主饼图的百分比数据列
    data.addColumn('number', 's1_sla_met_count');
    data.addColumn('number', 's2_sla_met_count');
    data.addColumn('number', 's3_sla_met_count');
    data.addColumn('number', 's4_sla_met_count');
    data.addRows(updatedDataISLA);

    // 应用格式化到主饼图的数据列（索引为 1 的 'count' 列）
    // 确保在 drawChartISLA 函数的开头创建 percentFormat 实例，或者在全局范围创建
    var percentFormat = new google.visualization.NumberFormat({
        fractionDigits: 0,
        suffix: '%'
    });
    percentFormat.format(data, 1); // 对第二列（索引1）进行格式化

    // 设置图表选项
    var options = {
        'title': 'Incidents SLA met percentage - ',
        'pieSliceText': 'value', // 确保这里是 'value'，以便显示格式化后的值
        is3D: 'true',
        'tooltip': { trigger: 'none' } // 主图未显示 tooltip
    };

    // 实例化并绘制图表
    var chart = new google.visualization.PieChart(document.getElementById('IR-SLA'));
    chart.draw(data, options);

    // ... (后续代码，包括事件监听器和 selectHandler 函数) ...
}

登录后复制

3. 应用格式化到弹出式饼图数据

在 selectHandler 函数中，当用户点击主饼图切片时，会生成一个新的 sliceData 用于弹出式饼图。同样，在 sliceData 填充完毕后，但在 sliceChart.draw(sliceData, sliceOptions); 之前，应用 percentFormat。弹出式饼图的百分比数据位于 sliceData.addColumn('number', 'Incident Count');，这也是数据表中的第二列（索引为 1）。

// ... (drawChartISLA 函数内部的 selectHandler) ...

function selectHandler() {
    var selection = chart.getSelection()[0];
    if (selection) {
        var sliceName = data.getValue(selection.row, 0);
        // ... (获取其他切片数据) ...
        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]);

        // 再次应用相同的格式化器到弹出式饼图的数据列（索引为 1 的 'Incident Count' 列）
        // 确保 percentFormat 实例在 selectHandler 外部或在 selectHandler 内部被正确创建
        var percentFormat = new google.visualization.NumberFormat({ // 可以在 drawChartISLA 外部定义为全局变量，避免重复创建
            fractionDigits: 0,
            suffix: '%'
        });
        percentFormat.format(sliceData, 1);

        // 为选定切片设置图表选项
        var sliceOptions = {
            'title': sliceName + ' SLA met percentage - ',
            pieSliceText: 'value', // 确保这里也是 'value'
            'width': 500,
            'height': 300,
            is3D: 'true',
            'tooltip': { 'text': 'value' } // 这里的 tooltip 也会被格式化
        };

        // ... (打开弹出窗口并绘制图表) ...
        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);
    }
}
// ... (centerPopup 函数) ...

登录后复制

完整代码整合示例（仅包含修改部分）

为了避免在 selectHandler 内部重复创建 percentFormat 实例，建议将其定义在 drawChartISLA 函数的外部或全局作用域。

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

// 在全局或父级作用域定义 NumberFormat 实例，以便在多个地方复用
var percentFormat = new google.visualization.NumberFormat({
    fractionDigits: 0, // 不显示小数位
    suffix: '%'        // 在数字后添加百分号
});

function drawChartISLA(updatedDataISLA) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'opco_name');
    data.addColumn('number', 'count');
    data.addColumn('number', 's1_sla_met_count');
    data.addColumn('number', 's2_sla_met_count');
    data.addColumn('number', 's3_sla_met_count');
    data.addColumn('number', 's4_sla_met_count');
    data.addRows(updatedDataISLA);

    // 应用格式化到主饼图的数据列 (索引为 1 的 'count' 列)
    percentFormat.format(data, 1);

    var options = {
        'title': 'Incidents SLA met percentage - ',
        'pieSliceText': 'value',
        is3D: 'true',
        'tooltip': { trigger: 'none' }
    };

    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);
            var sliceCount = data.getValue(selection.row, 1);
            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]);

            // 应用格式化到弹出式饼图的数据列 (索引为 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);
    }
}
</script>

登录后复制

注意事项

pieSliceText: 'value' 的重要性：在图表选项中，'pieSliceText' 属性必须设置为 'value'。如果设置为 'percentage'，图表将显示其内部计算的百分比，而不是您通过 NumberFormat 格式化的值。设置为 'value' 确保图表显示的是数据表中经过格式化的数值。
**格式化时机

以上就是优化 Google 饼图：为切片值添加百分比符号的专业指南的详细内容，更多请关注php中文网其它相关文章！