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

基于字符串的日期需要在图表的inputDateFormat对象中设置一个相应的dateFormatter，以确保在所有浏览器中都可以一致地对其进行解析（请注意，Chrome浏览器中的年份显示正确；假设您使用的是Firefox（显示2016）。只需将inputDateFormat设置为"yyyy"就可以了。

_chart.dateFormatter.inputDateFormat = "yyyy";

您可以找到有关日期格式here和更新的代码笔here的更多信息。

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

1 个答案: