Plotly JavaScript：自定义 y 轴上的 y 刻度或标签

Question

我正在使用 Plotly.js https://plotly.com/javascript/。我正在尝试开发一个图表，我想在 y 轴上的每个刻度上添加一个小图像。供参考，请参阅下面给出的图片。

注意 y 轴上的小灰色圆盘（在文本“红色”、“绿色”和“蓝色”旁边）。我正在努力实现这样的目标。但是在参考文档中，我找不到任何可以做到这一点的东西。

我怎样才能做到这一点？

[更新]
按照@Ruben 的建议实施答案并进一步进行一些更新后，我得到了 x 轴的这个小提示向左延伸到负侧（参考下面这个扩展提示的屏幕截图）

Answer 1

如果真的只是关于点，我已经破解了一些插入 this unicode shape as a solid, black circle at every bar using annotations 的东西。然后你可以根据需要给它上色。

var data = [{
  type: 'bar',
  x: [20, 14, 23],
  y: ['giraffes', 'orangutans', 'monkeys'],
  orientation: 'h'
}];

var layout = {
  annotations: data[0].y.map((v, i) => ({
    x: -0.75,
    y: i,
    xref: 'x',
    yref: 'y',
    text: "&#11044;",
    showarrow: false,
    font: {
      size: 14,
      color: ['red', 'blue', 'green'][i % 3]
    }
  }))
};

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

<script src='https://cdn.plot.ly/plotly-latest.js'></script>
<div id='myDiv'></div>

编辑：现在使用更改后的标签：

var data = [{
  type: 'bar',
  x: [20, 14, 23],
  y: ['giraffes', 'orangutans', 'monkeys'],
  orientation: 'h'
}];

data[0].y = data[0].y.map((v, i) => {
  const color = ['red', 'blue', 'green'][i % 3];
  return `${v} <span style="color: ${color};">&#11044;</span>`
})

var layout = {
  xaxis: {
    showline: true,
  },
  margin: {
    l: 100,
  }
};

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

<script src='https://cdn.plot.ly/plotly-latest.js'></script>
<div id='myDiv'></div>

Plotly JavaScript：自定义 y 轴上的 y 刻度或标签

Plotly JavaScript: Customize y ticks or labels on y axis

javascript

d3.js

plotly

plotly.js