问题描述
我正在制作二维 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;