amCharts年份坐标轴标签截断至十位，如何配置让图表从2019年起始？

这个问题我之前也碰到过，本质是amCharts的日期轴默认会自动调整刻度范围，让它对齐到baseInterval（基础时间间隔）的整数倍。你的数据间隔是10年，所以它自动把轴的起始点拉到了最近的十年整数（也就是2010年），来保证刻度的“规整性”，但这显然不符合你的需求。

下面给你两个简单有效的解决方法：

方法一：强制从数据最小日期开始 #

在日期轴的配置里添加startAxisAtMin: true，这个属性会强制坐标轴从你数据里的最小日期（也就是2019年）开始，不再自动扩展到对齐刻度间隔的起始点：

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

chart.data = [{"date":"2019-01-01","value":10},{"date":"2029-01-01","value":66},{"date":"2039-01-01","value":19},{"date":"2049-01-01","value":7},{"date":"2119-01-01","value":13},{"date":"2139-01-01","value":4}];

// 配置日期轴
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.startAxisAtMin = true; // 关键设置
dateAxis.baseInterval = {
  timeUnit: "year",
  count: 10
};
dateAxis.renderer.minGridDistance = 50;

// 其他图表配置
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.name = "Sales";
series.columns.template.tooltipText = "{valueY}";
series.columns.template.fillOpacity = .8;

方法二：手动指定坐标轴最小日期 #

如果你想完全控制坐标轴的起始范围，也可以直接设置dateAxis.min为你的起始日期字符串，这样轴会严格从2019年开始：

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.min = "2019-01-01"; // 直接指定最小日期
dateAxis.baseInterval = {
  timeUnit: "year",
  count: 10
};

两种方法都能解决问题，推荐第一种，因为它会自动适配数据的最小日期，不需要硬编码日期值，后续数据更新时也不用修改配置。

内容的提问来源于stack exchange，提问作者Rapster