如何在amCharts4中将Unix时间戳格式化为日期

Hey, I see the issue here! You're using a CategoryAxis to render your timestamps, but that axis treats your values as plain text categories—not actual dates. That's why setting dateFormatter isn't doing anything—it only works with date-aware axes like DateAxis.

Let's fix this step by step with a complete working example:

am4core.useTheme(am4themes_animated);
function createChart(htmlElement){
  var chart = am4core.create(htmlElement, am4charts.XYChart);
  
  // Set the global date formatter to your desired format
  chart.dateFormatter.dateFormat = "yyyy/MM/dd HH'h'mm";
  
  // Fix data: timestamps should be numbers, not strings
  chart.data = [
    { category: 1555596901, value1: 1, value2: 5, value3: 3, value4: 3 },
    { category: 1555611301, value1: 10, value2: 8, value3: 6, value4: 4 }
  ];
  
  chart.cursor = new am4charts.XYCursor();
  chart.colors.step = 2;
  
  // Replace CategoryAxis with DateAxis for date/time handling
  var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis.dataFields.date = "category";
  dateAxis.renderer.grid.template.location = 0;
  // Apply the same date format to the axis labels
  dateAxis.dateFormatter.dateFormat = "yyyy/MM/dd HH'h'mm";
  // Show formatted date in axis tooltip
  dateAxis.tooltipText = "{dateX}";
  
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.min = 0;
  valueAxis.renderer.minWidth = 35;
  
  // Update series to use dateX instead of categoryX
  var series1 = chart.series.push(new am4charts.ColumnSeries());
  series1.columns.template.width = am4core.percent(80);
  series1.columns.template.tooltipText = "{name}: {valueY.value}\nDate: {dateX}";
  series1.name = "Series 1";
  series1.dataFields.dateX = "category";
  series1.dataFields.valueY = "value1";
  series1.stacked = true;
  
  var series2 = chart.series.push(new am4charts.ColumnSeries());
  series2.columns.template.width = am4core.percent(80);
  series2.columns.template.tooltipText = "{name}: {valueY.value}\nDate: {dateX}";
  series2.name = "Series 2";
  series2.dataFields.dateX = "category";
  series2.dataFields.valueY = "value2";
  series2.stacked = true;
  
  var series3 = chart.series.push(new am4charts.ColumnSeries());
  series3.columns.template.width = am4core.percent(80);
  series3.columns.template.tooltipText = "{name}: {valueY.value}\nDate: {dateX}";
  series3.name = "Series 3";
  series3.dataFields.dateX = "category";
  series3.dataFields.valueY = "value3";
  series3.stacked = true;
  
  var series4 = chart.series.push(new am4charts.ColumnSeries());
  series4.columns.template.width = am4core.percent(80);
  series4.columns.template.tooltipText = "{name}: {valueY.value}\nDate: {dateX}";
  series4.name = "Series 4";
  series4.dataFields.dateX = "category";
  series4.dataFields.valueY = "value4";
  series4.stacked = true;
  
  return chart;
}
let chart1 = createChart("chartdiv");

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>

Key Changes Explained: #

• Replaced CategoryAxis with DateAxis: This axis understands date/time values and will apply your formatting rules correctly.
• Fixed data type: Changed timestamp strings to numbers so the DateAxis can parse them into valid dates.
• Updated series data fields: Switched from categoryX to dateX to map to the date axis.
• Configured date format: Set dateFormatter.dateFormat to yyyy/MM/dd HH'h'mm on both the chart and axis to get your desired "2019/04/19 11h52" style output.
• Enhanced tooltips: Added the formatted date to series tooltips for better user clarity.

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