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}";

此后，您需要在图表中添加一个游标，以控制工具提示：

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：

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

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

1 个答案: