如何使用 amchart.js 在图表中隐藏零值？

Question

如何使用 amchart.js 在图表中隐藏零值？

这是我生成图表的代码：

function getStatsByFlowByOperation(){
    $.ajax({
        success: function(data) {

                //data = formatData(data);

                am4core.useTheme(am4themes_material);
                chart = am4core.create("chartdiv", am4charts.XYChart);
                chart.hiddenState.properties.opacity = 0;
                chart.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
}]

编辑 -

解决方法是插入“null”。即使列显示“0”值，它也会保持显示，即：

if(data[i].READY == 0) {
    data[i].READY = null;
}

Answer 1

要隐藏零值项目符号，您应该使用适配器（Amcharts 4）。无需调整数据或使用丑陋的 JS 技巧。Amcharts 实现了适配器来进行各种动态渲染修改。

对于柱形图，这看起来像：

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = field;
series.dataFields.categoryX = "category";
series.name = name;
series.columns.template.tooltipText = "{name}: {valueY}";

var bullet = series.bullets.push(new am4charts.LabelBullet);
bullet.label.text = "{name}: {valueY}";
bullet.label.fill = am4core.color("#ffffff");
bullet.locationY = 0.5;

bullet.label.adapter.add("textOutput", function(text, target) {
    // Hide labels with 0 value
    if(target.dataItem && target.dataItem.valueY == 0) {
        return "";
    }
    return text;
});

检查：https : //www.amcharts.com/docs/v4/concepts/adapters/