在柱形图中的am4charts LabelBullet中限制0或null值

Question

我在am4charts中使用柱形图，从ajax调用我正在渲染图表。我还添加LabelBullet来显示标签中每个条形的值，但有时特定条形的结果将为0或null。在那种情况下，我无法处理弹出空值的标签。

我将发布两个场景，请帮助限制0或null值。

没有添加标签的小提琴：

https://jsfiddle.net/Knavaneeth/89xz0yok/1/

var chart_data = [
    {vendor: "Amazon", price: 21.67},
    {vendor: "Cimandis", price: 0},
    {vendor: "Co-op", price: 0},
    {vendor: "easenmyne", price: 0},
    {vendor: "La Collette", price: 25.92},
    {vendor: "M&S", price: 0},
    {vendor: "Morrisons", price: 0},
    {vendor: "Tescos", price: 0},
    {vendor: "tesst", price: 0},
    {vendor: "Valley Foods", price: 0},
    {vendor: "Waitrose", price: 0}
];

am4core.useTheme(am4themes_animated);
// Themes end  

var chart = am4core.create("amcharts_chart_price_compare_div", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.data =  chart_data;

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());       
categoryAxis.dataFields.category = "vendor";
categoryAxis.renderer.minGridDistance = 30;              

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 200;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 30;         

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "vendor";
series.dataFields.valueY = "price";
series.columns.template.tooltipText = "{valueY.value}";
series.columns.template.tooltipY = 0;
series.columns.template.strokeOpacity = 0;

小提琴添加标签：

https://jsfiddle.net/Knavaneeth/6eub51cz/1/

var chart_data = [
    {vendor: "Amazon", price: 21.67},
    {vendor: "Cimandis", price: 0},
    {vendor: "Co-op", price: 0},
    {vendor: "easenmyne", price: 0},
    {vendor: "La Collette", price: 25.92},
    {vendor: "M&S", price: 0},
    {vendor: "Morrisons", price: 0},
    {vendor: "Tescos", price: 0},
    {vendor: "tesst", price: 0},
    {vendor: "Valley Foods", price: 0},
    {vendor: "Waitrose", price: 0}
];

am4core.useTheme(am4themes_animated);
// Themes end  

var chart = am4core.create("amcharts_chart_price_compare_div", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.data =  chart_data;

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());       

categoryAxis.dataFields.category = "vendor";
categoryAxis.renderer.minGridDistance = 30;              

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 200;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 30;         

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "vendor";
series.dataFields.valueY = "price";
series.columns.template.tooltipText = "{valueY.value}";
series.columns.template.tooltipY = 0;
series.columns.template.strokeOpacity = 0;

chart.series.each(series => {
    console.log(series);     
    var labelBullet = series.bullets.push(new am4charts.LabelBullet());
    labelBullet.setStateOnChildren = true;
    labelBullet.label.text = "{vendor}\n[bold font-size: 20]{price}[/]";                                     
    labelBullet.label.maxWidth = 75;
    labelBullet.label.wrap = true;
    labelBullet.label.truncate = false;
    labelBullet.label.textAlign = "middle";
    labelBullet.label.padding(5, 5, 5, 5);
    labelBullet.label.fill = am4core.color("#000");
    const background = new am4core.RoundedRectangle();
    background.cornerRadius(3, 3, 3, 3);
    labelBullet.label.background = background;
    labelBullet.label.background.fill = series.fill;
    labelBullet.label.background.fillOpacity = 0.9;
    labelBullet.label.background.stroke = am4core.color("#fff");
    labelBullet.label.background.strokeOpacity = 1;
});  

最后，我需要一个解决方案，只有在不应显示0或其他值的情况下才能在图表中显示标签。

Answer 1

您可以直接在系列上设置工具提示，而不仅仅是列：

series.tooltipText = "{valueY.value}";

之后，您需要在图表中添加一个Cursor，它控制工具提示：

chart.cursor = new am4charts.XYCursor();

您可以使用以下代码段禁用所有其他轴工具提示和光标行：

chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;
valueAxis.tooltip.disabled = true;
categoryAxis.tooltip.disabled = true;

最后，您可能需要考虑使用以下命令使工具提示显示在列的顶部：

series.tooltip.pointerOrientation = "vertical";

Here是一个显示最终结果的代码笔。

要隐藏零值的LabelBullets，可以使用Adapter作为visible属性：

labelBullet.label.adapter.add('visible', (visible, target) => {
    return target.dataItem.dataContext.price !== 0;
});