本教程旨在指导开发者如何在 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 中需要格式化的特定列。
实施步骤与代码示例
我们将针对原始问题中的两个饼图（主饼图和点击切片后弹出的二级饼图）分别进行格式化。
步骤 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’ 确保图表显示的是数据表中经过格式化的数值。
- **格式化时机