如何使用amCharts.js隐藏图表中的零值？附代码与解决方案

要实现这个需求，核心思路是利用amCharts的特性：图表会自动忽略null值，但依然保留对应的分类轴条目。所以我们只需要把数据中的零值替换为null即可，无需修改图表的复杂配置。

具体修改步骤 #

在你的AJAX请求成功回调中，拿到数据后先进行预处理，把所有状态字段的零值替换为null，再把处理后的数据赋值给图表。

修改后的代码片段如下：

function getStatsByFlowByOperation(){
 $.ajax({
 success: function(data) {
  // 新增：预处理数据，将零值替换为null
  const targetStatuses = ["NEW", "DISABLED", "SKIPPED", "READY"];
  data.forEach(item => {
    targetStatuses.forEach(status => {
      // 检查该状态值是否为0，是的话替换为null
      if(item[status] === 0) {
        item[status] = null;
      }
    });
  });

  // 原有的图表初始化代码继续执行
  am4core.useTheme(am4themes_material);
  chart = am4core.create("chartdiv", am4charts.XYChart);
  chart.hiddenState.properties.opacity = 0;
  chart.data = data; // 这里使用处理后的data
  chart.colors.step = 2;
  chart.padding(30, 30, 10, 30);
  chart.legend = new am4charts.Legend();
  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "OPERATION_NAME";
  categoryAxis.renderer.minGridDistance = 30;
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.labels.template.rotation = 315;
  categoryAxis.renderer.labels.template.verticalCenter = "middle";
  categoryAxis.renderer.labels.template.horizontalCenter = "right";
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.renderer.inside = true;
  valueAxis.renderer.labels.template.disabled = true;
  valueAxis.min = 0;
  var allStatus = [];
  allStatus.push("NEW");
  allStatus.push("DISABLED");
  allStatus.push("SKIPPED");
  allStatus.push("READY");
  for(var i = 0; i < allStatus.length; i++) {
 createSeries(allStatus[i], allStatus[i]);
 }
 },
 error: function (jqXHR, exception) {
 if (globalVars.unloaded) {
 return;
 }
 manageAjaxError(jqXHR, textStatus, errorThrown);
 }
 });
}

效果说明 #

以你提供的输入数据示例为例：

原数据：[{ "READY": 0, " ": 1, "OPERATION_NAME": "INIT", "STEP": 1 }]

经过处理后，数据会变成：
[{ "READY": null, " ": 1, "OPERATION_NAME": "INIT", "STEP": 1 }]

此时图表渲染时，INIT分类列依然会显示在X轴上，但READY系列对应的零值柱形会被隐藏，完全符合你的需求。

为什么这个方案有效？ #

amCharts在绘制系列时，遇到null值会跳过该数据点的绘制，但不会移除对应的分类轴条目，这样既隐藏了零值的可视化，又保证了分类列的完整性，是最简洁高效的实现方式。

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