AmCharts 4 - позиция колонки / пули - PullRequest
Новая
       8

AmCharts 4 - позиция колонки / пули

0 голосов
/ 01 февраля 2020

каждый

Итак, у меня снова возникли проблемы с AmCharts 4.

Есть ли какой-нибудь способ всегда показывать маркер / метку столбца? Мой случай

Мы можем использовать этот пример из документации AmCharts, чтобы воспроизвести мою ситуацию. Просто установите для labelBullet.label.dy значение 20 положительных.

labelBullet.label.dy = 20;

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

Спасибо.

1 Ответ

0 голосов
/ 04 февраля 2020

Вы можете установить 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>
...