Google Visualization环形图：如何显示超100%的完成率？

核心思路 #

环形图的视觉部分始终以目标值为100%上限绘制，超过目标的部分不扩展环形范围，但通过自定义提示框（tooltip）或文本标注展示真实的完成率（比如200%）。

具体代码示例 #

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 定义目标值与实际营收
  const targetRevenue = 1000;
  const actualRevenue = 2000;
  
  // 计算视觉展示的完成比例（不超过100%）和真实完成率
  const visualCompletionRatio = Math.min(actualRevenue / targetRevenue, 1);
  const realCompletionRate = (actualRevenue / targetRevenue * 100).toFixed(1) + '%';
  
  // 准备图表数据：视觉部分仅展示到100%
  const data = google.visualization.arrayToDataTable([
    ['分类', '占比'],
    ['已完成', visualCompletionRatio],
    ['剩余', 1 - visualCompletionRatio]
  ]);

  // 图表配置选项
  const options = {
    pieHole: 0.4, // 环形空心比例
    tooltip: {
      isHtml: true,
      // 自定义提示框内容，显示真实完成数据
      formatter: function(row, dataTable) {
        return `<div>完成率：${realCompletionRate}</div><div>目标：${targetRevenue}，实际营收：${actualRevenue}</div>`;
      }
    },
    legend: 'none',
    // 在环形中心添加文本标注，直接显示真实完成率
    annotations: {
      textStyle: {
        fontSize: 24,
        bold: true
      },
      alwaysOutside: false,
      pieSliceText: 'none',
      text: realCompletionRate
    }
  };

  // 渲染图表
  const chart = new google.visualization.PieChart(document.getElementById('donutchart'));
  chart.draw(data, options);
}

关键细节说明 #

• 视觉范围控制：通过Math.min(actualRevenue / targetRevenue, 1)确保环形的完成部分最多占100%，不会超出环形边界。
• 真实数据展示：
  • 自定义tooltip：鼠标悬浮时显示真实完成率、目标值与实际营收；
  • 中心文本标注：直接在环形核心位置展示真实完成率，直观传递核心信息。
• 场景兼容性：当营收低于目标时（比如800/1000），代码会自动计算正常比例，tooltip和标注也会同步显示对应真实值，兼容两种业务场景。

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