如何在Google饼图切片中添加%符号（CodeIgniter环境）

问题背景 #

基于CodeIgniter开发的Google饼图，点击主饼图切片可弹出子饼图展示S1-S4数值，需要在主/子饼图的切片数值旁显示%符号。此前尝试在MySQL查询中拼接%符号，数据库查询结果正常但饼图无法显示。

原因分析 #

Google Charts的number类型列仅识别纯数值，若传入带%的字符串会被判定为无效数据，导致饼图渲染失败。因此不能在后端拼接%，需保留数值类型，通过前端自定义格式化实现符号显示。

解决步骤 #

1. 主饼图添加%符号 #

修改主饼图的配置选项，使用pieSliceTextFunction自定义切片显示文本：

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);

  // 修改主饼图配置
  var options = {
    'title': 'Incidents SLA met percentage - ',
    // 自定义切片文本，在数值后添加%
    pieSliceText: function(value) {
      return value + '%';
    },
    is3D: true,
    'tooltip': {
      trigger: 'none'
    }
  };

  // 实例化并绘制图表（原有代码不变）
  var chart = new google.visualization.PieChart(document.getElementById('IR-SLA'));
  chart.draw(data, options);
  // ... 后续事件监听代码不变
}

2. 子饼图添加%符号 #

在切片选择的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]);

    // 修改子饼图配置
    var sliceOptions = {
      'title': sliceName + ' SLA met percentage - ',
      // 自定义切片文本
      pieSliceText: function(value) {
        return value + '%';
      },
      'width': 500,
      'height': 300,
      is3D: true,
      'tooltip': {
        // Tooltip也显示%符号
        'text': function(value) {
          return 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);
  }
}

3. 后端代码无需修改 #

保持原有MySQL查询和数据返回逻辑，无需拼接%符号，确保返回的是纯数值类型，保证饼图比例计算正确。

效果说明 #

修改后，主饼图和子饼图的切片数值旁都会显示%符号，同时饼图的比例计算不受影响，渲染正常。

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