amcharts - 值标签隐藏在上午图表中

Question

在此处输入图像描述

我正在使用“am chart”图表创建一个图表，并在每个条形图的顶部显示“值标签”。但最高值并没有表明它在隐藏。如何显示它们，请查看附件图片以获得更好的理解。

我正在使用“am chart”图表创建一个图表，并在每个条形图的顶部显示“值标签”。但最高值并没有表明它在隐藏。如何显示它们，请查看附件图片以获得更好的理解。

html

<div id="chartdiv" style="height: 400px;"></div>

js

[am4core.useTheme(am4themes_animated);



var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.data = \[{
    "country": "A",
    "visits": 599990,
}, {
    "country": "N",
    "visits": 497000
} \];



chart.padding(40, 40,40 , 40);

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.minGridDistance = 60;





var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Data ($M)";
valueAxis.title.fontWeight = "bold";


// Modify chart's colors
chart.colors.list = \[
  am4core.color("#845EC2"),
  am4core.color("#D65DB1"),
  am4core.color("#FF6F91"),
  am4core.color("#FF9671"),
  am4core.color("#FFC75F"),
  am4core.color("#F9F871"),
\];

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "country";
series.dataFields.valueY = "visits";
series.tooltipText = "{valueY.value}"
series.columns.template.strokeOpacity = 0;
series.columns.template.width = am4core.percent(20);


var valueLabel = series.bullets.push(new am4charts.LabelBullet());
valueLabel.label.text = "{valueY.value}";
valueLabel.label.fontSize = 14;
valueLabel.label.truncate = false;
valueLabel.label.hideOversized = false;
valueLabel.valign = "top";
valueLabel.dy = -10;
valueLabel.strokeWidth = 0;
chart.cursor = new am4charts.XYCursor();





// as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
series.columns.template.adapter.add("fill", function (fill, target) {
    return chart.colors.getIndex(target.dataItem.index);
});


var legend = new am4charts.Legend();
legend.parent = chart.chartContainer;
//legend.itemContainers.template.togglable = false;
legend.marginTop = 20;

series.events.on("ready", function(ev) {
  var legenddata = \[\];
  series.columns.each(function(column) {
    legenddata.push({
      name: column.dataItem.categoryX,
      fill: column.fill,
      columnDataItem: column.dataItem
    });
  });
  legend.data = legenddata;
});

legend.itemContainers.template.events.on("hit", function(ev) {
  //console.log("Clicked on ", ev.target.dataItem.className);
  if (!ev.target.isActive) {
    ev.target.dataItem.dataContext.columnDataItem.hide();
  }
  else {
    ev.target.dataItem.dataContext.columnDataItem.show();
  }
});

legend.itemContainers.template.events.on("over", function(ev) {
  ev.target.dataItem.dataContext.columnDataItem.column.isHover = true;
  ev.target.dataItem.dataContext.columnDataItem.column.showTooltip();
});

legend.itemContainers.template.events.on("out", function(ev) {
  ev.target.dataItem.dataContext.columnDataItem.column.isHover = false;
  ev.target.dataItem.dataContext.columnDataItem.column.hideTooltip();
});][1]

标签： amcharts