如何让Plotly.js图表坐标轴刻度值均为正或去除负号？

可以实现，核心思路是用tickvals和ticktext配置项手动映射刻度值与显示文本，让X轴实际的数值（包括负数）对应显示为正数标签。

修改后的X轴配置示例 #

xaxis: {
    title: {
        text: 'Position, m',
    },
    range: [axisMinX, axisMaxX],
    gridcolor: "rgb(229,229,229)",
    showgrid: true,
    showline: false,
    showticklabels: true,
    tickcolor: "rgb(127,127,127)",
    ticks: "outside",
    zeroline: false,
    autorange: "reversed",
    // 新增配置实现自定义刻度标签
    tickvals: [axisMinX, (axisMinX + axisMaxX)/2, axisMaxX], // 实际刻度对应的数值（含负数）
    ticktext: [Math.abs(axisMinX), Math.abs((axisMinX + axisMaxX)/2), Math.abs(axisMaxX)] // 显示为正数的标签
}

动态生成刻度的进阶实现 #

如果需要自动适配不同的X轴范围生成刻度，可通过代码动态生成tickvals和ticktext数组：

// 示例：根据轴范围生成5个均匀分布的刻度
const tickCount = 5;
const tickStep = (axisMaxX - axisMinX) / (tickCount - 1);
const tickvals = [];
const ticktext = [];

for (let i = 0; i < tickCount; i++) {
    const val = axisMinX + i * tickStep;
    tickvals.push(val);
    ticktext.push(Math.abs(val).toFixed(1)); // 保留1位小数显示正数
}

// 应用到X轴配置中
xaxis: {
    // 原有配置...
    tickvals: tickvals,
    ticktext: ticktext
}

原理说明 #

• tickvals：定义X轴上刻度对应的实际数值位置（包含你的负数据点对应的X值）
• ticktext：定义每个刻度位置要显示的文本内容，通过Math.abs()将数值转为正数展示，既保证数据点位置正确，又满足刻度全为正的需求

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