如何创建X轴为常规数值的HighCharts蜡烛图？设置linear类型无效

当然可以创建X轴为常规数值类型的K线图，你遇到的问题是因为使用了Highcharts.stockChart（股票专用图表），它默认会强制将X轴设为datetime类型并启用ordinal模式，直接覆盖了你设置的type: 'linear'。

下面提供两种可行的解决方案：

方案一：改用普通Highcharts图表 #

放弃股票专用的stockChart，使用基础的Highcharts.chart，这样X轴的线性设置可以直接生效：

// 创建图表
Highcharts.chart("container", {
  title: {
    text: "AAPL Stock Price",
  },
  xAxis: {
    type: "linear",
    title: {
      text: "数值轴"
    }
  },
  series: [
    {
      type: "candlestick",
      name: "AAPL Stock Price",
      data: [
        [1, 230.12, 230.2, 229.8, 230.15],
        [2, 230.15, 230.17, 229.85, 229.95],
        [3, 229.95, 230.1, 229.88, 230.05],
        [4, 230.05, 230.25, 230.0, 230.15],
        [5, 230.15, 230.18, 229.9, 230.0],
      ],
    },
  ],
});

方案二：在StockChart中强制启用线性轴 #

如果必须保留stockChart，需要同时关闭ordinal模式并设置X轴类型为linear，同时建议禁用rangeSelector（该组件和线性轴兼容性较差）：

// 创建股票图表并设置线性X轴
Highcharts.stockChart("container", {
  rangeSelector: {
    enabled: false
  },
  title: {
    text: "AAPL Stock Price",
  },
  xAxis: {
    type: "linear",
    ordinal: false, // 必须关闭该模式才能让线性轴生效
    title: {
      text: "数值轴"
    }
  },
  series: [
    {
      type: "candlestick",
      name: "AAPL Stock Price",
      data: [
        [1, 230.12, 230.2, 229.8, 230.15],
        [2, 230.15, 230.17, 229.85, 229.95],
        [3, 229.95, 230.1, 229.88, 230.05],
        [4, 230.05, 230.25, 230.0, 230.15],
        [5, 230.15, 230.18, 229.9, 230.0],
      ],
    },
  ],
});

关键原因说明 #

Highcharts.stockChart是专为时间序列数据设计的，默认开启的ordinal模式会将X轴数据视为连续的时间节点，忽略数据中的实际数值，因此必须关闭该模式，才能让线性轴的设置生效。

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