嘿，刚好对Google Charts的饼图配置比较熟悉，这就帮你解决“不缩小字号还能显示所有扇区标签”的需求！

核心思路是让小扇区的标签跳出饼图区域显示，用引导线连接到对应扇区，同时通过配置强制所有标签输出，具体方案如下：

关键配置要点 #

• 强制所有扇区输出标签：设置pieSliceText为'label'（或你需要的'value'/'percent'），覆盖默认的“小扇区隐藏标签”逻辑
• 启用标签引导线：在pieSliceTextStyle里配置lineWidth和color，让小扇区的标签可以延伸到饼图外部，不会被扇区遮挡或隐藏
• 调整饼图起始角度：通过pieStartAngle分散扇区位置，减少标签之间的重叠概率

修改后的完整代码示例 #

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

// 绘制图表并设置图表值
function drawChart() {
  var totalOutstandingData = [
    ['Card Product', 'Amount'],
    ['Premium Card', 500],
    ['Standard Card', 300],
    ['Student Card', 80], // 小扇区
    ['Corporate Card', 30] // 小扇区
  ];

  var data = google.visualization.arrayToDataTable(totalOutstandingData);

  var options = {
    title: 'Card Product Outstanding Amount',
    // 强制显示所有扇区的标签，可选值：'label'/'value'/'percent'
    pieSliceText: 'label',
    pieSliceTextStyle: {
      fontSize: 14, // 保持你需要的字号，完全不用缩小
      color: '#333',
      lineWidth: 1, // 开启标签引导线
      color: '#666' // 引导线颜色，和标签区分开
    },
    pieStartAngle: 60, // 调整起始角度，分散扇区减少标签重叠
    chartArea: {width: '70%', height: '70%'}, // 缩小饼图占比，给外部标签留空间
    legend: 'none' // 如果不需要图例，可以关闭，让标签更清晰
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}

额外优化小技巧 #

如果遇到标签还是重叠的情况，可以试试：

• 微调pieStartAngle的数值，找到最适合你数据的角度
• 调整chartArea的宽高占比，给外部标签留出更多显示空间
• 极端情况下，也可以给个别小扇区设置自定义标签位置，但一般用上面的配置就足够解决问题啦

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