AmCharts 4 - 列的 bullet/babel 位置

Question

大家

所以，我在使用 AmCharts 4 时又遇到了一些问题。

有没有办法始终显示列的 bullet/label？ My case

我们可以使用 AmCharts 文档中的这个示例来重现我的情况。只需将 labelBullet.label.dy 设置为 20 positive.

labelBullet.label.dy = 20;

https://codepen.io/team/amcharts/pen/VxbVeq

谢谢。

Answer 1

您可以在图表实例上将 maskBullets 设置为 false 以防止它剪裁 LabelBullet，例如chart.maskBullets = false;

演示：

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

// Add data
chart.data = [{
  "date": new Date(2018, 3, 20),
  "value": 90
}, {
  "date": new Date(2018, 3, 21),
  "value": 102
}, {
  "date": new Date(2018, 3, 22),
  "value": 65
}, {
  "date": new Date(2018, 3, 23),
  "value": 62
}, {
  "date": new Date(2018, 3, 24),
  "value": 55
}, {
  "date": new Date(2018, 3, 25),
  "value": 81
}];

chart.maskBullets = false;
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());

// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "value";
lineSeries.dataFields.dateX = "date";
lineSeries.name = "Sales";
lineSeries.strokeWidth = 3;

// Add simple bullet
var circleBullet = lineSeries.bullets.push(new am4charts.CircleBullet());
circleBullet.circle.stroke = am4core.color("#fff");
circleBullet.circle.strokeWidth = 2;

var labelBullet = lineSeries.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = "{value}";
labelBullet.label.dy = 20;

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>

AmCharts 4 - 列的 bullet/babel 位置

AmCharts 4 - column's bullet/babel position

amcharts4