如何解决Plotly.js中X、Y轴出现重复刻度值的问题

问题根因 #

Plotly.js默认自动计算刻度逻辑下，若单轴对应的数据全部为恒定值，轴的数值区间会极度收窄，自动生成的多组刻度会落在相同数值点上，最终出现重复显示的问题。单独设置nticks仅能指定刻度生成数量，无法解决区间过小时的刻度重复问题。

适配全场景的解决方案 #

以下三种方案可覆盖不同版本、不同数据场景的需求：

方案1：自动适配常量数据的通用配置（推荐）

渲染图表前先判断对应轴是否为常量数据，动态调整轴配置，对正常非恒定数据无影响：

// 通用轴调整函数，支持X/Y轴
function getAdjustedAxisConfig(data, axisType = 'y') {
  const allAxisValues = data.flatMap(trace => trace[axisType]);
  // 处理浮点精度导致的判断误差
  const uniqueVals = [...new Set(allAxisValues.map(v => Number(v.toFixed(10))))];
  // 非常量数据返回空配置，走默认逻辑
  if (uniqueVals.length !== 1) return {};
  const constantVal = uniqueVals[0];
  return {
    [`${axisType}axis`]: {
      tickmode: 'array',
      tickvals: [constantVal], // 仅保留唯一刻度
      range: [constantVal * 0.99, constantVal * 1.01] // 轻微拉大范围避免刻度贴边
    }
  }
}

// 调用示例，合并到布局配置中
const chartData = [/* 你的trace数据 */];
const layout = {
  title: '图表标题',
  // 同时适配X、Y轴
  ...getAdjustedAxisConfig(chartData, 'x'),
  ...getAdjustedAxisConfig(chartData, 'y')
}
Plotly.newPlot('chartContainer', chartData, layout);

方案2：无数据判断的通用配置（Plotly.js v1.58.0+ 支持）

无需提前检测数据，直接通过函数式dtick配置动态计算刻度间隔，适配所有区间场景：

const layout = {
  xaxis: {
    dtick: (_, axis) => {
      const valueRange = axis.range[1] - axis.range[0];
      // 区间大于0时按区间分成5份，区间为0时默认间隔为1
      return valueRange > 0 ? valueRange / 5 : 1;
    }
  },
  yaxis: {
    dtick: (_, axis) => {
      const valueRange = axis.range[1] - axis.range[0];
      return valueRange > 0 ? valueRange / 5 : 1;
    }
  }
}

方案3：低版本兼容方案

针对不支持函数式dtick的旧版本Plotly.js，通过自定义格式化函数去重：

// 每次渲染前清空刻度缓存
let tickCache = {x: new Set(), y: new Set()};

const layout = {
  xaxis: {
    tickformat: (val) => {
      if (tickCache.x.has(val)) return '';
      tickCache.x.add(val);
      return val;
    }
  },
  yaxis: {
    tickformat: (val) => {
      if (tickCache.y.has(val)) return '';
      tickCache.y.add(val);
      return val;
    }
  }
}

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