javascript - 如何将 HTML 徽章作为标签包含在柱形图中？

Question

var xValue = ['1','2','3','4','5','6','7','8','9','10','11','12','13'];
var yValue = [10, 6, 8,9,1,17,3,7,13,2,12,4,13];
var wicket1 = ['W','','W','W','','','','W','','','','','W'];

var trace1 = {
  x: xValue,
  y: yValue,
  type: 'bar',
  text: wicket1,
  textposition: 'outside',
};

var data1 = [trace1];

Plotly.newPlot('myDiv', data1);

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

Answer 1

我希望这就是您要找的东西，我无法使用类使其工作，但如果我添加内联样式，效果很好，希望这是可以接受的。

似乎只有一些样式可以工作，所以将“徽章”的样式放置为内联样式，看看是否产生了您需要的输出。

var xValue = ['1','2','3','4','5','6','7','8','9','10','11','12','13'];
var yValue = [10, 6, 8,9,1,17,3,7,13,2,12,4,13];
var wicket1 = ['W','','W','W','','','','W','','','','','W'].map(function(el) {
return '<span style="color:blue;">'+el+'</span>'
});;

var trace1 = {
  x: xValue,
  y: yValue,
  type: 'bar',
  text: wicket1,
  textposition: 'outside',
};

var data1 = [trace1];

Plotly.newPlot('myDiv', data1);

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