如何在Plotly.js中设置条形图刻度线位于条形之间？

完全可以实现你想要的效果！这种把刻度线放在条形之间、用分割点代表区间边界的展示方式，确实比范围标签更简洁直观。下面我给你拆解具体的实现步骤，结合你的示例数据来调整代码：

核心思路 #

把x轴从分类轴（category）切换为线性轴（linear），手动指定刻度的位置和标签，同时调整条形的x坐标（设为区间中点）和宽度（设为区间跨度），让条形刚好填满两个刻度之间的空间。

修改后的完整代码 #

// 定义分割点数组（你的原始x标签）
const breakpoints = [0.1, 0.5, 1, 2, 5, 10, 25, 50, 100, 250, 500];
// 计算每个条形的x中点和宽度
const barX = [];
const barWidth = [];
for (let i = 0; i < breakpoints.length - 1; i++) {
  const mid = (breakpoints[i] + breakpoints[i+1]) / 2;
  const width = breakpoints[i+1] - breakpoints[i];
  barX.push(mid);
  barWidth.push(width);
}

var chart = {
  data: [ {
    rowKey: "current",
    name: "current",
    x: barX, // 替换为区间中点
    y: [0.006369426751592357, 0.012738853503184714, 0.03821656050955414, 0.03184713375796178, 0.10828025477707007, 0.24203821656050956, 0.2229299363057325, 0.20382165605095542, 0.12101910828025478, 0.006369426751592357],
    values: [0.006369426751592357, 0.012738853503184714, 0.03821656050955414, 0.03184713375796178, 0.10828025477707007, 0.24203821656050956, 0.2229299363057325, 0.20382165605095542, 0.12101910828025478, 0.006369426751592357],
    text: ["1%", "1%", "4%", "3%", "11%", "24%", "22%", "20%", "12%", "1%"],
    type: "bar",
    hoverinfo: "x+y",
    textposition: "auto",
    orientation: "v",
    marker: { color: null, colors: null },
    uid: "2cf1e3",
    width: barWidth // 设置每个条形的宽度为区间跨度
  } ],
  layout: {
    showlegend: false,
    margin: { l: 80, r: 10, t: 140, b: 80 },
    xaxis: {
      tickangle: 0,
      tickfont: { size: 12 },
      titlefont: { size: 12, weight: 700 },
      type: "linear", // 切换为线性轴
      title: "scenario",
      tickvals: breakpoints, // 刻度位置设为分割点
      ticktext: breakpoints.map(String), // 刻度标签用分割点文本
      range: [breakpoints[0] - (breakpoints[1]-breakpoints[0])/2, breakpoints[breakpoints.length-1] + (breakpoints[breakpoints.length-1]-breakpoints[breakpoints.length-2])/2], // 调整轴范围让首尾条形完整显示
      autorange: false
    },
    yaxis: {
      title: "",
      type: "linear",
      tickformat: ".0%",
      hoverformat: ".0%",
      range: [0, 0.25477707006369427],
      autorange: true
    },
    width: 500,
    height: 360,
  },
  options: {
    displayModeBar: false,
    modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
  }
};

Plotly.newPlot("myDiv", chart);

关键修改说明 #

• x轴配置：将type改为linear，通过tickvals指定刻度的精确位置（你的分割点），ticktext设置显示的标签。
• 条形位置：把每个条形的x值计算为对应区间的中点，确保条形居中在两个刻度之间。
• 条形宽度：设置width为对应区间的跨度（后一个分割点减前一个），让条形刚好填满刻度间的空间。
• 轴范围调整：手动设置range，让首尾的条形不会被轴边缘截断。

预期效果 #

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