RGraph - 标签中的自定义 HTML答案

【问题标题】：RGraph - custom-HTML in labelsRGraph - 标签中的自定义 HTML
【发布时间】：2021-01-11 04:21:22
【问题描述】：

是否可以将自定义 HTML 代码插入为条形图的 xaxisLabel？

喜欢

xaxisLabels: ['<i class="fa fas fa-check fa-2x"></i>']

在结果中，缺少结束标记 (</i>)。

【问题讨论】：

标签： rgraph

【解决方案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);

【讨论】：

在下一个版本（5.28 版）中，我将添加一个名为 xaxisLabelsClick 的新属性，您可以将其设置为一个函数，这将使这一切变得更加容易。您将能够将其设置为单击标签时将调用的函数。该函数将传递对象和数字的索引。
另外，我将添加 xaxisLabelsPre 和 xaxisLabelsPost。这些不会被“转义”，因此您可以根据需要使用 HTML 标签。
很可能是 xaxisLabelsClass、xaxisLabelsId 和 xaxisLabelsStyle，而不是 xaxisLabelPre 和 xaxisLabelsPost。
当我在绘制 rgraph 后像 $(element).text('TEST') 这样编辑标签文本时，新的文本/标签不会在条形下方居中。我该怎么做？
@Michael 您将不得不调整位置以使其居中。您也许可以使用 transform: CSS 属性来进行此或相对 CSS 定位（其中之一适用于 iirc）。例如 myLabel.style.transform = 'translateX(-10px)';或者使用相对定位，您可以使用：myLabel.style.position = 'relative'; myLabel.style.left = '-10px';