如何移除Google Charts堆叠柱状图顶部的零值小切片？

要隐藏堆叠柱状图中零值对应的小切片并禁用悬停，最直接的方法是将数据中的0替换为null——Google Charts会自动忽略null值，不会渲染对应的切片，也不会触发悬停交互。

修改后的代码示例 #

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
     function drawStackedChart() {
          var data = google.visualization.arrayToDataTable([
               ['Columns', 'A', 'B', 'C'],
               ['Column1',  1 ,  null ,  null], // 将0替换为null
               ['Column2',  null ,  1 ,  null]  // 将0替换为null
          ]);
          var options = {
               isStacked: true
          };
          new google.visualization.ColumnChart(document.getElementById('stackedChart')).draw(data, options);
     }
     google.load("visualization", "1", {packages:["corechart"]});
     google.charts.setOnLoadCallback(drawStackedChart);
</script>
<div id="stackedChart"></div>

动态数据批量处理方案 #

如果你的数据是动态生成的，可以通过遍历批量替换零值：

// 原始动态数据
var rawData = [
     ['Columns', 'A', 'B', 'C'],
     ['Column1',  1 ,  0 ,  0],
     ['Column2',  0 ,  1 ,  0]
];

// 遍历替换所有0为null
var processedData = rawData.map(row => row.map(cell => cell === 0 ? null : cell));

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

修改后，零值对应的切片会完全消失，也不会出现不必要的悬停提示。

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