Angular Highcharts Areaspline图表X轴设日期后无法正常显示问题

问题根源 #

1. 日期数据格式错误：API返回的日期是字符串形式的Date.UTC(...)，并非Highcharts可识别的时间戳数值
2. 数据处理逻辑错误：AppData是数组类型，直接通过appData['cpu']取值会得到undefined
3. Tooltip配置不完整：未指定日期格式化规则，导致悬停时无法正确显示时间

修复步骤 #

1. 解析日期字符串为时间戳 #

创建工具函数，把API返回的日期字符串转换为Highcharts能识别的UTC时间戳：

parseDateString(dateStr: string): number {
  // 提取Date.UTC括号内的参数内容
  const params = dateStr.match(/Date\.UTC\((.*?)\)/)?.[1];
  if (!params) return 0;
  // 拆分参数并转换为数字数组
  const dateParts = params.split(',').map(part => parseInt(part.trim(), 10));
  return Date.UTC(...dateParts);
}

2. 修正数据处理逻辑 #

遍历AppData数组，正确提取并转换各指标的日期与数值：

fetchData(){
  this.httpService.getData(request).subscribe((response: any) => {
    try {
      const jsonBody = response['body'];
      const appData = jsonBody['AppData'];
      
      // 初始化空数据数组
      this.cpuData = [];
      this.loadData = [];
      this.ramData = [];
      this.diskData = [];

      // 遍历AppData中的每个对象（此处默认取所有对象数据，可根据需求调整）
      appData.forEach(item => {
        // 处理CPU数据
        item.cpu.forEach(([dateStr, value]) => {
          this.cpuData.push([this.parseDateString(dateStr), value]);
        });
        // 处理RAM数据
        item.ram.forEach(([dateStr, value]) => {
          this.ramData.push([this.parseDateString(dateStr), value]);
        });
        // 处理Load数据
        item.load.forEach(([dateStr, value]) => {
          this.loadData.push([this.parseDateString(dateStr), value]);
        });
        // 处理Disk数据
        item.disk.forEach(([dateStr, value]) => {
          this.diskData.push([this.parseDateString(dateStr), value]);
        });
      });

      this.createAreaSplineChart();
    } catch (e: any) {
      console.log('Error in parsing json ' + e.message);
    }
    return response;
  });
}

3. 优化图表配置 #

调整X轴与Tooltip配置，确保日期显示符合预期：

createAreaSplineChart(){
  this.highcharts = Highcharts;
  this.chartOptions = {   
    chart: {
      type: 'areaspline'
    },
    title: {
      text: "Area Spline graph"
    },
    legend : {
      backgroundColor: '#FFFFFF'
    },
    xAxis:{
      title: {
        text: '时间'
      },
      type: 'datetime',
      dateTimeLabelFormats : {
        day: '%Y-%m-%d',
        hour: '%H:%M',
        minute: '%H:%M'
      },
      gridLineWidth: 1,
      lineWidth: 0,
      gridLineDashStyle: 'Solid',
      labels: {
        enabled: true
      },
    },
    yAxis : {
      title: {
        text: ''
      }
    },
    plotOptions : {
      series: {
        marker: {
          enabled: false,
          states: {
            hover: {
              enabled: true
            }
          }
        }
      },
      areaspline: {
        fillOpacity: 0.1
      }
    },
    tooltip : {
      shared: true,
      // 自定义Tooltip显示内容
      formatter: function() {
        const date = Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x);
        let tooltipText = `<b>${date}</b><br/>`;
        this.points.forEach(point => {
          tooltipText += `${point.series.name}: ${point.y.toFixed(4)}<br/>`;
        });
        return tooltipText;
      }
    },
    credits:{
      enabled: false
    },
    series: [
      {
        name: 'CPU',
        data: this.cpuData,
        color:'#0021FF',
        lineWidth: 1.3
      }, 
      {
        name: 'RAM',
        data: this.ramData,
        color:'#FF5238',
        lineWidth: 1.3
      },
      {
        name: 'Load',
        data: this.loadData,
        color:'#981FFF',
        lineWidth: 1.3
      }, 
      {
        name: 'Disk',
        data: this.diskData,
        color:'#00D6F2',
        lineWidth: 1.3
      }
    ]
  };
}

关键说明 #

• Highcharts的datetime轴要求X值为毫秒级时间戳，必须将字符串形式的Date.UTC(...)转换为实际数值
• Highcharts的月份为0基索引（0代表1月，5代表6月），Date.UTC会自动处理该规则，无需额外调整
• 通过Tooltip的formatter函数可完全自定义显示内容，确保日期与数值格式满足需求

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