单击它获取 XAxisLabel 值

Question

您好，我在 angular 7 应用程序中使用 RGraph。一切都按预期工作。但我需要如下功能。

我想在单击它时获取 xaxislabel 的值。如果有人有答案，请告诉我。

提前致谢

我试过下面但没用

document.getElementsByClassName('rgraph_accessible_text_xaxis_labels')[0].addEventListener('click', function(){
  alert('text'+ document.getElementsByClassName('rgraph_accessible_text_xaxis_labels')[0].nodeValue);
  });

Answer 1

你很接近 - 我做了一些改动的演示：

<!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>
        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
          }
        }).draw();





        label = document.getElementsByClassName('rgraph_accessible_text_xaxis_labels')[0];





        // Add a mousemove listener that changes the mouse cursor to the hand
        label.addEventListener('mousemove', function(e)
        {
            e.target.style.cursor = 'pointer';
        }, false);





        // Add a click listener that shows an alert
        label.addEventListener('click', function(e)
        {
            alert('Text: '+ label.innerHTML);
        }, false);
    </script>
    

</body>
</html>

这里有一个代码笔可以演示它：

https://codepen.io/rgraph/pen/yLaEQWb

单击它获取 XAxisLabel 值

Get XAxisLabel value on clicking on it

rgraph

angular