Plotly.js柱状图遇重复X标签无法显示全部柱状条问题

你当前的代码中，两个指向'A'的柱状条trace会被Plotly在同一X轴分类下合并（叠加或偏移不明显），导致视觉上仅显示两个柱状条。要实现显示全部三个柱状条并保留原X标签，可采用以下两种方案：

方案一：自定义X轴刻度，独立显示每个柱状条 #

通过将每个数据点映射为独立的X轴索引，再用ticktext映射回原标签，确保三个柱状条都能独立展示：

const xLabels = ['A', 'B', 'A'];
const y = [1, 2, 3];
const colors = ['red', 'blue', 'green'];

// 为每个数据点创建独立trace，使用索引作为唯一X标识
const traces = xLabels.map((label, idx) => ({
  x: [idx],
  y: [y[idx]],
  type: 'bar',
  marker: { color: colors[idx] }
}));

const layout = {
  title: 'Bar Chart with Three Bars',
  xaxis: {
    title: 'X Axis',
    tickvals: [0, 1, 2], // 对应trace的X索引值
    ticktext: xLabels,   // 显示的原标签
    type: 'category'
  },
  yaxis: { title: 'Y Axis' },
  barmode: 'group',
  bargap: 0.2
};

Plotly.newPlot(element, traces, layout);

方案二：利用offsetgroup实现同分类下多柱状条并排 #

通过为同X标签的trace设置不同的offsetgroup，配合调整柱状条宽度和间距，让同一分类下的多个条并排显示：

const x = ['A', 'B', 'A'];
const y = [1, 2, 3];
const colors = ['red', 'blue', 'green'];

const trace1 = {
  x: ['A'],
  y: [y[0]],
  type: 'bar',
  marker: { color: colors[0] },
  offsetgroup: 'A1',
  width: 0.2 // 控制条宽避免重叠
};
const trace2 = {
  x: ['B'],
  y: [y[1]],
  type: 'bar',
  marker: { color: colors[1] },
  offsetgroup: 'B',
  width: 0.2
};
const trace3 = {
  x: ['A'],
  y: [y[2]],
  type: 'bar',
  marker: { color: colors[2] },
  offsetgroup: 'A2',
  width: 0.2
};

const layout = {
  title: 'Bar Chart with Three Bars',
  xaxis: { title: 'X Axis', type: 'category' },
  yaxis: { title: 'Y Axis' },
  barmode: 'group',
  bargroupgap: 0.1,
  bargap: 0.2
};

const data = [trace1, trace2, trace3];

Plotly.newPlot(element, data, layout);

方案一适合需要严格保留原标签顺序且每个条独立的场景；方案二则更贴近你最初的偏移量思路，让同X标签的条在同一位置并排展示。

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