Как включить значки HTML в качестве меток в столбчатую диаграмму?

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'];

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>
  • 1
    что вы имеете в виду со значками ?
  • 0
    Мне нужно заменить 'W' на <span class = "badge"> W </ span>
Показать ещё 1 комментарий
Теги:
charts
plotly

3 ответа

1

Я надеюсь, что это то, что вы ищете, я не могу заставить его работать с помощью класса, но если я добавлю стили inline, он отлично работает, надеюсь, что это приемлемо.

Кажется, что работают только некоторые стили, поэтому поместите стили "значка" в виде встроенных стилей и посмотрите, готов ли ваш нужный вывод.

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>
Поделиться
  • 0
    @FALIL Помогает ли вам этот ответ?
0

Надеюсь, это поможет вам немного дальше... извините, если нет.

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>
Поделиться
0

Да, возможно, скрипт создает SVG файл. Внутри этих g-тегов вы можете размещать текст и изображения. Но вам нужно сделать это в SVG. (текст = <text x="0" y="15" fill="red">Your text here</text>) Изображение 174551

Поделиться
  • 0
    Могу ли я получить пример кода для создания простой диаграммы столбца с использованием SVG ??
  • 0
    Вы не можете просто сделать столбчатую диаграмму, используя SVG, но вы можете добавить к ним текст, используя js
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню