#rgraph
#rgraph
Вопрос:
Можно ли вставить пользовательский HTML-код в качестве xaxisLabel гистограммы?
Нравится
xaxisLabels: ['<i class="fa fas fa-check fa-2x"></i>']
В результате закрывающий тег ( </i>
) отсутствует.
Ответ №1:
Нет возможности добавлять пользовательский HTML к ярлыкам, но поскольку метки являются узлами DOM (если вы используете текст DOM, который включен по умолчанию), вы можете манипулировать ими таким образом, чтобы они соответствовали вашему содержимому сердца. Вот пример:
<!DOCTYPE html>
<html>
<head>
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.bar.js"></script>
</head>
<body>
<h1>Clickable labels</h1>
<canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
<script>
bar = new RGraph.Bar({
id:'cvs1',
data: '8,4,6,3,5,4,2'.split(','),
options: {
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
textAccessiblePointerevents: true,
// If you just want to manipulate the style of the labels
// there are these five properties
//xaxisLabelsSize: 16,
//xaxisLabelsFont: 'Verdana',
//xaxiLabelsBold: true,
//xaxisLabelsItalic: true,
//xaxisLabelsColor: 'red'
}
}).draw();
labels = document.getElementsByClassName('rgraph_accessible_text_xaxis_labels');
// Maniuplate the style
for (i=0; i<labels.length; i) {
labels[i].style.fontWeight = 'bold';
labels[i].style.fontStyle = 'italic';
labels[i].style.fontSize = '14pt';
labels[i].style.color = 'red';
labels[i].style.fontFamily = 'Verdana';
}
// Add a click event listener
labels[0].addEventListener('click', function (e)
{
alert('Label was clicked');
}, false);
// Add a mousemove event listener
labels[0].addEventListener('mousemove', function (e)
{
e.target.style.cursor = 'pointer';
}, false);
</script>
</body>
</html>
И в codepen:
https://codepen.io/rgraph/pen/poEOKPV
Редактировать:
Кроме того, вы также можете использовать функцию RGraph.text.find() после создания диаграммы следующим образом:
labels = RGraph.text.find({
object: bar,
text: 'Wed'
});
labels[0].style.fontWeight = 'bold';
labels[0].style.cursor = 'pointer';
labels[0].addEventListener('click', function (e)
{
alert('My label!');
}, false);
Комментарии:
1. В следующем выпуске (версия 5.28) я добавлю новое свойство с именем xaxisLabelsClick, которое вы сможете установить в функцию, которая сделает это намного проще. Вы сможете установить для него функцию, которая будет вызываться при нажатии на ярлык. Этой функции будет передан объект и индекс числа.
2. Кроме того, я добавлю xaxisLabelsPre и xaxisLabelsPost. Они не будут «экранированы», поэтому вы сможете использовать HTML-теги, если хотите.
3. Вместо xaxisLabelPre и xaxisLabelsPost это вполне может быть xaxisLabelsClass, xaxisLabelsId и, возможно, xaxisLabelsStyle.
4. Когда я редактирую текст метки, например, $(element).text(‘TEST’) после рисования rgraph, новый текст / метка не центрируется под панелью. Как я могу это сделать?
5. @Michael Вам нужно настроить положение, чтобы центрировать его. Возможно, вы могли бы использовать свойство transform: CSS для этого или относительного позиционирования CSS (один из них работает iirc). например, myLabel.style. transform = ‘translateX (-10px)’; или при относительном позиционировании вы должны использовать это: myLabel.style.position = ‘relative’; myLabel.style. left = ‘-10px’;