amCharts 5：如何隐藏最后一个 ValueAxis 标签以避免截断它？

Question

amCharts 4 提供了使用 axis.renderer.maxLabelPosition = 0.95;.

如何在 amCharts 5 中实现相同的结果？

https://www.amcharts.com/demos/sorted-bar-chart/ 上的 amCharts 5 演示说明了这个问题。 x 轴上最后一个标签的最后数字被隐藏，这是误导性的。

Answer 1

amCharts 5 使用 minPosition 和 maxPosition 获得与 v4 的 minLabelPosition 和 maxLabelPosition 相同的结果您需要按照文档在标签模板上进行设置here:

let xRenderer = xAxis.get("renderer");
xRenderer.labels.template.setAll({
  minPosition: 0.1,
  maxPosition: 0.9
});

演示：

var root = am5.Root.new("chartdiv");
var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: false,
  panY: false,
  wheelX: "none",
  wheelY: "none"
}));


var yRenderer = am5xy.AxisRendererY.new(root, {
  minGridDistance: 30
});

var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
  maxDeviation: 0,
  categoryField: "network",
  renderer: yRenderer,
  tooltip: am5.Tooltip.new(root, { themeTags: ["axis"] })
}));

var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
  maxDeviation: 0,
  min: 0,
  extraMax:0.1,
  renderer: am5xy.AxisRendererX.new(root, {})
}));

let xRenderer = xAxis.get("renderer");

xRenderer.labels.template.setAll({
  minPosition: 0.1,
  maxPosition: 0.9
});

var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  name: "Series 1",
  xAxis: xAxis,
  yAxis: yAxis,
  valueXField: "value",
  categoryYField: "network",
  tooltip: am5.Tooltip.new(root, {
    pointerOrientation: "left",
    labelText: "{valueX}"
  })
}));

// Set data
var data = [
  {
    "network": "Facebook",
    "value": 2255250000
  },
  {
    "network": "Google+",
    "value": 430000000
  },
  {
    "network": "Instagram",
    "value": 1000000000
  },
  {
    "network": "Pinterest",
    "value": 246500000
  },
  {
    "network": "Reddit",
    "value": 355000000
  },
  {
    "network": "TikTok",
    "value": 500000000
  },
  {
    "network": "Tumblr",
    "value": 624000000
  },
  {
    "network": "Twitter",
    "value": 329500000
  },
  {
    "network": "WeChat",
    "value": 1000000000
  },
  {
    "network": "Weibo",
    "value": 431000000
  },
  {
    "network": "Whatsapp",
    "value": 1433333333
  },
  {
    "network": "YouTube",
    "value": 1900000000
  }
];

yAxis.data.setAll(data);
series.data.setAll(data);

chart.set("cursor", am5xy.XYCursor.new(root, {
  behavior: "none",
  xAxis: xAxis,
  yAxis: yAxis
}));

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<div id="chartdiv"></div>

amCharts 5：如何隐藏最后一个 ValueAxis 标签以避免截断它？

amCharts 5: how to hide the last ValueAxis label to avoid truncating it?

amcharts

amcharts5