Highcharts对数Y轴上线形序列缩放异常问题解决方案

问题表现 #

对logarithmic类型Y轴上的linear系列执行缩放操作时出现显示异常：

• 缩小视图效果：
  
• 放大视图效果：
  

线形序列无法正确完成重缩放，本应与主candlestick序列保持固定相对位置的趋势线发生偏移。

复现代码 #

Highcharts.stockChart("container", {
  chart: {
    type: "line",
    zoomType: "xy",
  },
  series: [
    {
      data: [
        {
          x: -220924800000,
          high: 63,
          low: 56,
          close: 62,
          open: 56,
          name: "01/01/1963",
          color: "#F57350",
        },
        {
          x: 1657670400000,
          high: 18893.92,
          low: 18159.03,
          close: 18159.03,
          open: 18593.15,
          name: "13/07/2022",
          color: "#297F0D",
        },
      ],
      dataGrouping: {
        forced: true,
        groupPixelWidth: 0,
        units: [["day", 1]],
      },
      id: "main-series",
      name: "Demo series",
      type: "candlestick",
      yAxis: "default",
    },
    {
      color: "#C0C0C0",
      data: [
        [-220914000000, 369],
        [1659236400000, 198817.91340815497],
      ],
      dashStyle: "LongDash",
      id: "upper-tendency",
      tooltip: {
        valueDecimals: 0,
        xDateFormat: "%B %Y",
      },
      showInLegend: false,
      yAxis: "default",
    },
    {
      color: "#C0C0C0",
      data: [
        [-220914000000, 34],
        [1659236400000, 16672.03531810569],
      ],
      dashStyle: "Solid",
      id: "lower-tendency",
      tooltip: {
        valueDecimals: 0,
        xDateFormat: "%B %Y",
      },
      showInLegend: false,
      yAxis: "default",
    },
  ],
  title: { text: "Logarithmic Zoom: Linear series" },
  tooltip: { shared: true, split: false },
  xAxis: {
    dateTimeLabelFormats: {
      second: "%d/%m/%y<br/>%H:%M:%S",
      minute: "%d/%m/%y<br/>%H:%M",
      hour: "%d/%m/%y<br/>%H:%M",
      day: "%d/%m/%y",
      month: "%m/%y",
      year: "%Y",
    },
    type: "datetime",
  },
  yAxis: [
    {
      id: "default",
      opposite: true,
      type: "logarithmic",
      title: { text: "" },
      reversed: false,
      offset: 50,
      tickInterval: 0.4,
    },
  ],
});

解决方案 #

问题根源是Highcharts Stock默认对所有系列开启数据分组（dataGrouping），两个趋势线系列没有显式关闭该配置，缩放过程中分组逻辑会对仅含两个点的趋势线数据做错误的聚合计算，最终导致渲染位置偏移。

给两个线形趋势线系列添加如下配置即可修复：

dataGrouping: {
  enabled: false
}

修复后缩放时趋势线会严格按照原始点位在对数轴上的映射位置渲染，和K线序列保持固定相对位置。如果需要消除对数轴刻度对齐带来的微小位置偏差，可以额外给yAxis添加alignTicks: false配置。

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