如何解决RGraph - 标签中的自定义 HTML
是否可以插入自定义 HTML 代码作为条形图的 xaxisLabel？
喜欢
xaxisLabels: ['<i class="fa fas fa-check fa-2x"></i>']
在结果中，缺少结束标记 (</i>)。
解决方法
没有将自定义 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,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>
在代码笔上：
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);
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。