如何在Highcharts中设置X轴为月日格式并自定义Tooltip显示

1. X轴显示月日（MM-DD）格式 #

在图表配置的xAxis选项中，设置labels.format为日期格式化字符串{value:%m-%d}，同时确保x轴类型为datetime：

xAxis: {
  type: 'datetime',
  labels: {
    format: '{value:%m-%d}' // 显示为MM-DD格式
  }
}

2. 自定义Tooltip显示格式 #

通过tooltip.formatter函数自定义显示内容，将日期转为完整的MM-DD-YYYY格式，同时拼接数量信息：

tooltip: {
  formatter: function() {
    // 格式化日期为MM-DD-YYYY
    const dateStr = Highcharts.dateFormat('%m-%d-%Y', this.point.x);
    return `Date ${dateStr} | Quantity ${this.point.y}`;
  }
}

完整修改示例（对应你的项目代码） #

找到chartOptions中的对应部分替换即可：

chartOptions = {
  // ...其他原有配置
  xAxis: {
    type: 'datetime',
    labels: {
      format: '{value:%m-%d}'
    }
  },
  tooltip: {
    formatter: function() {
      const date = Highcharts.dateFormat('%m-%d-%Y', this.point.x);
      return `Date ${date} | Quantity ${this.point.y}`;
    }
  },
  // ...其他原有配置
};

说明：Highcharts的日期格式化语法中，%m代表两位月份，%d代表两位日期，%Y代表四位年份，通过dateFormat方法可以将时间戳转为指定格式的字符串。

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