0

我在 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 或其他值不应该显示时才在图表中显示标签。

4

1 回答 1

0

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

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

这是显示最终结果的代码笔。

要隐藏零值的 LabelBullets，您可以将Adapter用于可见属性：

labelBullet.label.adapter.add('visible', (visible, target) => {
    return target.dataItem.dataContext.price !== 0;
});
于 2019-03-18T18:29:16.990 回答