AMCharts

Question

我正在使用 AM 图表绘制多年来每年的金额。我创建了一个代码笔来向您展示我的问题：

https://codepen.io/conormdowney/pen/QzamJb

我绘制图表的代码：

var dataProvider = [
{year: "2017", value: 50},
{year: "2018", value: 123},
{year: "2019", value: 150},
{year: "2020", value: 291}
];

var _chart = am4core.create('chartDiv', am4charts.XYChart);
_chart.paddingRight = 20;

_chart.data = dataProvider;

var dateAxis = _chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.baseInterval = 
  {
  count: 1,
  timeUnit: "year"
}

var valueAxis = _chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.cursorTooltipEnabled = false;
// Create series
var series = _chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "year";
series.strokeWidth = 3;
series.connect = false;
series.tensionX = 0.8;
series.fillOpacity = 0.2;
series.tooltipText = "[bold]{valueY}[/]";

var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.stroke = am4core.color("#fff");
bullet.strokeWidth = 3;

var range = valueAxis.createSeriesRange(series);
range.value = 0;
range.endValue = 100;
range.contents.stroke = _chart.colors.getIndex(2);
range.contents.fill = range.contents.stroke;
range.contents.fillOpacity = 0.2;

var scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
_chart.scrollbarX = scrollbarX;
_chart.cursor = new am4charts.XYCursor();

我有 2017 年到 2020 年的数据。绘制时显示的是 2016 年到 2019 年，直到您将鼠标悬停在数据上，在这种情况下，它会突出显示您悬停后那一年的数据。你能告诉我为什么会发生这种情况以及如何纠正它吗？

Answer 1

基于字符串的日期需要在图表的 dateFormatter 对象中设置相应的 inputDateFormat 以确保它在所有浏览器中得到一致的解析（请注意，在 Chrome 中显示的是年份正确启动；我假设您在看到 2016 的地方使用 Firefox）。只需将 inputDateFormat 设置为 "yyyy" 即可。

_chart.dateFormatter.inputDateFormat = "yyyy";

您可以找到有关日期格式的更多信息here and an updated codepen here。

AMCharts - 以正确数据显示的折线图

AM Charts - Line chart displaying in correct data