AmCharts日期时间轴图表显示空白问题求助：已配置minPeriod='hh'但无数据展示

看起来你的AmCharts图表空白主要是由数据未按时间顺序排列导致的，另外还有几个小细节需要调整，下面一步步来解决：

核心问题：数据无序 #

AmCharts的日期轴（尤其是开启parseDates: true时）要求数据必须按时间戳从小到大（旧到新）的顺序排列。你的chartvalues数据是乱序的——比如2021年的条目在最后，2022年的条目分散在不同位置，这会让图表无法正确解析和渲染时间轴。

解决步骤1：对数据进行排序 #

在初始化图表前，给chartvalues按year字段排序即可：

// 按日期升序排序数据
chartvalues.sort(function(a, b) {
  return new Date(a.year) - new Date(b.year);
});

排序后的数据会变成：

var chartvalues = [
  {"year": "2021-04-13 01:49:44", "value": 82},
  {"year": "2022-01-31 14:12:22", "value": 71},
  {"year": "2022-02-21 11:12:48", "value": 43},
  {"year": "2022-06-08 16:42:38", "value": 50}
];

次要细节：日期格式匹配优化 #

你的dataDateFormat设置为"YYYY-MM-DD JJ:NN:SS"，虽然和数据里的"YYYY-MM-dd HH:mm:ss"内容兼容，但为了更严谨，建议改成和数据完全对应的格式：

"dataDateFormat": "YYYY-MM-DD HH:mm:ss"

额外检查点 #

• 确认已正确引入AmCharts的相关库文件（比如amcharts.js、serial.js以及主题文件），如果库未加载，图表也会显示空白。
• 确保页面上存在ID为sales-analytics的DOM元素，图表需要挂载到这个容器上。

修正后的完整代码示例 #

$(function() {
  // 先对数据按日期排序
  var chartvalues = [
    {"year": "2022-01-31 14:12:22", "value": 71},
    {"year": "2022-06-08 16:42:38", "value": 50},
    {"year": "2022-02-21 11:12:48", "value": 43},
    {"year": "2021-04-13 01:49:44", "value": 82}
  ];
  
  chartvalues.sort(function(a, b) {
    return new Date(a.year) - new Date(b.year);
  });

  var amchart = AmCharts.makeChart("sales-analytics", {
    "type": "serial",
    "theme": "light",
    "marginTop": 0,
    "marginRight": 0,
    "dataProvider": chartvalues,
    "valueAxes": [{
      "axisAlpha": 0,
      "gridAlpha": 0,
      "position": "left"
    }],
    "graphs": [{
      "id": "g1",
      "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
      "bullet": "round",
      "bulletSize": 8,
      "lineColor": "#fe5d70",
      "lineThickness": 2,
      "negativeLineColor": "#fe9365",
      "type": "smoothedLine",
      "valueField": "value"
    }],
    "chartScrollbar": {
      "graph": "g1",
      "gridAlpha": 0,
      "color": "#888888",
      "scrollbarHeight": 55,
      "backgroundAlpha": 0,
      "selectedBackgroundAlpha": 0.1,
      "selectedBackgroundColor": "#888888",
      "graphFillAlpha": 0,
      "autoGridCount": true,
      "selectedGraphFillAlpha": 0,
      "graphLineAlpha": 0.2,
      "graphLineColor": "#c2c2c2",
      "selectedGraphLineColor": "#888888",
      "selectedGraphLineAlpha": 1
    },
    "chartCursor": {
      "categoryBalloonDateFormat": "YYYY-MM-dd HH:mm:ss",
      "cursorAlpha": 0,
      "valueLineEnabled": true,
      "valueLineBalloonEnabled": true,
      "valueLineAlpha": 0.5,
      "fullWidth": true
    },
    "dataDateFormat": "YYYY-MM-DD HH:mm:ss",
    "categoryField": "year",
    "categoryAxis": {
      "minPeriod": "hh",
      "parseDates": true,
      "gridAlpha": 0,
      "minorGridAlpha": 0,
      "minorGridEnabled": true
    },
    "export": {
      "enabled": true
    }
  });
  amchart.addListener("rendered", zoomChart);
  if (amchart.zoomChart) {
    amchart.zoomChart();
  }
  function zoomChart() {
    amchart.zoomToIndexes(Math.round(amchart.dataProvider.length * 0.4), Math.round(amchart.dataProvider.length * 0.55));
  }
});

按照上面的修改，你的图表应该就能正常显示了。

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