Ограничение 0 или нулевого значения в am4charts LabelBullet в столбчатой ​​диаграмме - PullRequest
Новая
       4

Ограничение 0 или нулевого значения в am4charts LabelBullet в столбчатой ​​диаграмме

0 голосов
/ 18 марта 2019

Я использую столбчатую диаграмму в am4charts, из вызова ajax я рендеринг диаграммы. Я также добавляю LabelBullet для отображения значения каждого бара в метках, но иногда результат для определенного бара будет 0 или ноль. В этом сценарии я не могу обработать метки, выдаваемые для пустых значений.

Я опубликую оба сценария, пожалуйста, помогите ограничить 0 или нулевые значения.

скрипка без добавления меток:

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 или другие значения не должны отображаться.

1 Ответ

0 голосов
/ 18 марта 2019

Вы можете установить всплывающую подсказку непосредственно для ряда, а не только для столбцов: 

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 для нулевых значений, вы можете использовать Адаптер для видимого свойства: 

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