日期轴上的 Amcharts 4 错误

如何解决日期轴上的 Amcharts 4 错误

我正在制作二维 amchart 图表。如果日期早于 1945 年，则显示的时间会向前显示 1 小时。

在下图中，光标位于时间 02:00，工具提示显示 03:00。

// Use themes
am4core.useTheme(am4themes_animated);

// Create chart instance
var chart = am4core.create("chartdiv",am4charts.XYChart);
chart.paddingRight = 20;

// Add data
chart.data = [{
  "date": new Date(1818,3,2,0),"value": 90
},{
  "date": new Date(1818,1,"value": 102
},"value": 65
},"value": 125
},4,"value": 55
}];

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGriddistance = 50;
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm";

// 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.strokeWidth = 3;
lineseries.showOnInit = false;
lineseries.tooltipText = "{date}: [b]{valueY}[/]";

chart.cursor = new am4charts.XYCursor();

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

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

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

我尝试更改日期格式或日期时区，但没有奏效。

解决方法

我花了一些时间才弄明白：

解决方案是更改为 chart.data 提供的日期

new Date(1818,3,2,0)

到

new Date(Date.UTC(1818,0))

同时设置

chart.dateFormatter.utc = true

现在轴和数据点从 00:00 开始同步。
我在多个时区测试了我的解决方案，结果相同。

// Use themes
am4core.useTheme(am4themes_animated);

// Create chart instance
var chart = am4core.create("chartdiv",am4charts.XYChart);
chart.paddingRight = 20;

// Add data
chart.data = [{
  "date": new Date(Date.UTC(1818,0)),"value": 90
},{
  "date": new Date(Date.UTC(1818,1,"value": 102
},"value": 65
},"value": 125
},4,"value": 55
}];

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm";
chart.dateFormatter.utc = true

// 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.strokeWidth = 3;
lineSeries.showOnInit = false;
lineSeries.tooltipText = "{date}: [b]{valueY}[/]";

chart.cursor = new am4charts.XYCursor();

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

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

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

,

你试过这些吗？

chart.dateFormatter.timezoneOffset = 300;

或

chart.dateFormatter.utc = true;