AmCharts4中Unix时间戳格式化：显示含时分的日期

我看了你的代码，发现几个关键问题导致你没法显示带小时分钟的日期，咱们一步步来解决：

1. 先修复你写的formatDate函数的错误 #

你函数里有个笔误：if (day < 10) { day = '0' + dd; }这里的dd应该是day，不然会直接报错。不过更核心的问题是，这个函数只返回了年月日，完全没包含时分信息，这就导致X轴的DateAxis只能识别到日期级别，没法显示时分。

2. 不要把时间转成字符串，直接用Date对象更靠谱 #

AmCharts的DateAxis对原生Date对象支持最好，咱们可以直接把Unix时间戳转成Date对象，而不是自定义格式化字符串，这样后续能灵活配置X轴的显示格式，还能避免解析错误。

3. 配置DateAxis显示时分格式 #

因为你的所有数据都是同一天（2019年4月19日），所以需要明确告诉DateAxis我们要展示的是小时和分钟，而不是日期。可以通过设置baseInterval、dateFormats和periodChangeDateFormats来实现。

修改后的完整代码 #

am4core.useTheme(am4themes_animated); 
var chart = am4core.create("chartdiv", am4charts.XYChart); 
chart.dataSource.url = "https://api.myjson.com/bins/8se3o"; 

// 异步加载数据后处理时间：转成Date对象保留完整时分信息
chart.events.on("datavalidated", function() {
  chart.data = chart.data.map(element => {
    element.time = new Date(element.time * 1000); // 直接转为原生Date对象
    return element; 
  });
});

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
// 设置基础时间间隔为分钟（如果你的数据粒度是小时，就改成"hour"）
dateAxis.baseInterval = { timeUnit: "minute", count: 1 };
// 配置不同时间周期的显示格式，这里统一显示时分
dateAxis.dateFormats.setKey("minute", "HH:mm");
dateAxis.dateFormats.setKey("hour", "HH:mm");
dateAxis.periodChangeDateFormats.setKey("minute", "HH:mm");
dateAxis.periodChangeDateFormats.setKey("hour", "HH:mm");
// 关闭标签旋转，让时分显示更清晰
dateAxis.renderer.labels.template.rotation = 0;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); 
valueAxis.tooltip.disabled = true; 

var series = chart.series.push(new am4charts.LineSeries()); 
series.dataFields.dateX = "time"; 
series.name = "outDiff"; 
series.dataFields.valueY = "outDiff"; 
series.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>"; 
series.tooltipText = "[#000]{valueY.value}[/]"; 
series.tooltip.background.fill = am4core.color("#FFF"); 
series.tooltip.getStrokeFromObject = true; 
series.tooltip.background.strokeWidth = 3; 
series.tooltip.getFillFromObject = false; 
series.fillOpacity = 0.6; 
series.strokeWidth = 2; 
series.stacked = true; 

var series2 = chart.series.push(new am4charts.LineSeries()); 
series2.name = "inDiff"; 
series2.dataFields.dateX = "time"; 
series2.dataFields.valueY = "inDiff"; 
series2.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>"; 
series2.tooltipText = "[#000]{valueY.value}[/]"; 
series2.tooltip.background.fill = am4core.color("#FFF"); 
series2.tooltip.getFillFromObject = false; 
series2.tooltip.getStrokeFromObject = true; 
series2.tooltip.background.strokeWidth = 3; 
series2.sequencedInterpolation = true; 
series2.fillOpacity = 0.6; 
series2.stacked = true; 
series2.strokeWidth = 2; 

chart.cursor = new am4charts.XYCursor(); 
chart.cursor.xAxis = dateAxis; 
chart.scrollbarX = new am4core.Scrollbar(); 
chart.legend = new am4charts.Legend(); 
chart.legend.position = "top"; 

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: 500px; } 

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

关键修改点说明 #

• 用datavalidated事件处理数据：因为dataSource是异步加载的，原来直接写chart.data.map会在数据加载前执行，根本取不到有效数据；
• 直接转为Date对象：保留了完整的时分秒信息，让DateAxis能正确识别时间粒度；
• 配置DateAxis格式：强制X轴显示时分，而不是默认的日期，适配你同一天的数据集；

这样修改后，你的面积图X轴就会正确显示带小时和分钟的时间了。

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