Highcharts时间序列图：财年无年份数据处理及折线首尾连接问题

问题描述 #

我的Highcharts时间序列图出现首尾点被直线连接的异常，推测是数据未按时间顺序排列导致的——把7月至次年1月的数据裁剪为7月至12月后，问题消失。因此需要给MM-DD格式的日期添加年份（对应财年：比如2000年7月至2001年6月）来修复。

之前尝试在可视化中手动添加年份无效，确认需要处理原始数据，但不清楚如何加载、处理数据并让图表引用处理后的结果。

数据示例 #

CSV数据共3列，首行为表头，前3行内容如下：

DAY_OF_YEAR,COUNT,%
07-01,5.0,5.1
07-02,6.0,6.0
……

原Highcharts脚本 #

Highcharts.chart('container', {
  data: {
    csvURL: 'data.csv',    
    enablePolling: false,
    parsed: function(columns) {
      console.log(columns);
    }
  },

  chart: {
    type: 'line'
  },
  xAxis: {
    type: 'datetime',
    title: { text: 'Day of year' },
    labels: {
        format: '{value:%b %e}'
    },
    min: Date.UTC(2000, 7, 1),   // Sep 1, 2000
    max: Date.UTC(2001, 6, 30),  // Jun 30, 2001    
  },
  tooltip: {
    xDateFormat: '%b %e',
    shared: true
},
  series: [{
    pointStart: Date.UTC(2000, 7, 1),
    data: []  // Filled by parsed()
  }]
});

解决方案：处理财年日期并生成正确时间序列 #

核心是在parsed回调中处理原始数据，给MM-DD日期分配对应财年的年份，生成UTC时间戳，确保数据按时间排序后再赋值给图表系列。

修改后的完整代码 #

Highcharts.chart('container', {
  data: {
    csvURL: 'data.csv',    
    enablePolling: false,
    parsed: function(columns) {
      // 解构CSV列数据：日期列、COUNT列、%列
      const [dateHeader, ...dates] = columns[0];
      const [countHeader, ...counts] = columns[1];
      const [percentHeader, ...percents] = columns[2];
      
      const countData = [];
      const percentData = [];

      // 遍历每一行数据（跳过表头）
      dates.forEach((dateStr, index) => {
        const [monthStr, dayStr] = dateStr.split('-');
        const month = parseInt(monthStr, 10) - 1; // Highcharts月份为0-11的索引值
        const day = parseInt(dayStr, 10);
        let year = 2000;

        // 1-6月属于财年的次年
        if (month < 6) {
          year = 2001;
        }

        // 生成UTC时间戳
        const timestamp = Date.UTC(year, month, day);
        // 组装Highcharts需要的点格式：[时间戳, 数值]
        countData.push([timestamp, counts[index]]);
        percentData.push([timestamp, percents[index]]);
      });

      // 按时间戳升序排序，确保数据 chronological
      countData.sort((a, b) => a[0] - b[0]);
      percentData.sort((a, b) => a[0] - b[0]);

      // 将处理好的数据赋值给系列
      this.series[0].setData(countData);
      // 添加%系列（如果需要显示）
      this.addSeries({
        name: '%',
        data: percentData
      });
    }
  },

  chart: {
    type: 'line'
  },
  xAxis: {
    type: 'datetime',
    title: { text: 'Day of year' },
    labels: {
        format: '{value:%b %e}'
    },
    min: Date.UTC(2000, 6, 1),   // 修正：7月对应索引6，原代码错误设为7（对应9月）
    max: Date.UTC(2001, 5, 30)   // 修正：6月对应索引5，原代码错误设为6（对应7月）
  },
  tooltip: {
    xDateFormat: '%b %e',
    shared: true
  },
  series: [{
    name: 'COUNT',
    data: []
  }]
});

关键修正与说明 #

1. 日期索引修正：原代码中Date.UTC(2000,7,1)实际对应9月（月份为0-based索引），财年从7月开始需改为Date.UTC(2000,6,1)，否则X轴范围会偏移。
2. 数据排序：处理后的数据必须按时间戳升序排列，彻底解决非 chronological 数据导致的首尾连接问题。
3. 多系列处理：若需同时显示COUNT和%两个系列，可在parsed中分别生成数据数组并添加到图表。

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