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

问题描述

我使用Plotly.js https://plotly.com/javascript/。我正在尝试开发一个图表，希望在y轴的每个刻度上添加一个小的图像。作为参考，请参见下面的图像。

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

我该如何实现？

[UPDATE]
在按照@Ruben的建议实施答案并进一步进行一些更新之后，我将x轴的这个小尖端延伸到了负极的左侧（请参见下面的扩展技巧的屏幕截图）

解决方法

如果真的只是关于圆点，那么我已经弄混了一些东西，使用this unicode shape将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: "⬤",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',orientation: 'h'
}];

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

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

Plotly.newPlot('myDiv',layout);

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