如何在列表中包含HTML徽章作为标签？

Question

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我希望这是你正在寻找的东西，我无法使用类来使它工作，但如果我在内联添加样式它很有效，希望这是可以接受的。

只有一些款式似乎有用，所以放置＆＃34;徽章＆＃34;作为内联样式并查看是否生成了所需的输出。

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

是的，脚本可以创建一个SVG文件。在这些g-tag中，您可以放置​​文本和图像。但是你需要在SVG中做到这一点。 （文字= <text x="0" y="15" fill="red">Your text here</text>）

Answer 3

我希望这会对你有所帮助...对不起，如果没有。

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);


var container = document.getElementsByClassName("bartext")[0];
container.textContent = "Label";

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