如何在Plotly对数刻度Y轴添加2、3、4…等更多刻度

要在Plotly的对数Y轴上显示2、3…9这类非10幂次的刻度，你需要手动指定所有要显示的刻度值和对应的文本，具体实现如下：

核心思路 #

对数轴默认只显示10的整数次幂刻度（1、10、100…），要添加中间的2-9、20-90等刻度，需要：

• 生成覆盖当前Y轴范围的所有目标刻度值
• 在layout.yaxis中通过tickvals指定刻度对应的数值，ticktext指定显示的文本（可选，Plotly会自动解析数值为文本）

修改后的完整代码 #

JavaScript部分

// 生成对数轴所需的所有刻度值：1,2,...,9,10,20,...,90,...直到1e10
function generateLogTicks(minVal, maxVal) {
  const ticks = [];
  let currentExp = Math.floor(Math.log10(minVal));
  const maxExp = Math.floor(Math.log10(maxVal));
  
  while (currentExp <= maxExp) {
    const base = Math.pow(10, currentExp);
    // 添加1-9*base的刻度
    for (let i = 1; i <= 9; i++) {
      const tick = i * base;
      if (tick >= minVal && tick <= maxVal) {
        ticks.push(tick);
      }
    }
    currentExp++;
  }
  return ticks;
}

var trace1 = {
  x: [7, 8],
  y: [1, 10000000000],
  type: 'scatter'
};

var data = [trace1];

// 生成对应刻度值
const yTicks = generateLogTicks(1, 10000000000);

var layout = {
  width: 500,
  height: 800,
  xaxis: {
    autorange: true
  },
  yaxis: {
    type: 'log',
    tickvals: yTicks,
    // 可选：如果需要自定义显示文本，比如显示整数而非科学计数法，可以设置ticktext
    // ticktext: yTicks.map(tick => tick.toString()),
    autorange: true
  }
};

Plotly.newPlot('myDiv', data, layout);

HTML部分

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

关键说明 #

• generateLogTicks函数会根据你的Y轴范围（1到1e10）自动生成所有1-9、10-90…这类刻度值，确保覆盖整个轴范围
• 移除了原代码中的dtick:1，因为手动指定tickvals后，dtick的设置会被覆盖
• 如果希望刻度文本以整数形式显示而非科学计数法，可以取消注释ticktext的配置，将数值转为字符串

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