如何改变光标样式时，鼠标悬停在谷歌图表API与Javascript

How to change the cursor style when hovered over Google Chart API with Javascript

本文关键字：谷歌 悬停 Javascript API 鼠标 何改变 改变 样式 光标      更新时间：2023-09-26

我在这里所做的是，我可以改变光标样式为指针，当鼠标悬停在列与CSS。然而，我不知道用Javascript和events.addListener

做相同的路径

  • Summary:更改光标样式

      与CSS (Done)
    • Javascript
  • 与 (没有)
    • 与<<li> em>事件。addListener (Not yet)
演示

HTML: 

<table>
    <tr>
        <td>
            <div id="chart_div" style="width: 350px; height: 350px;"></div>
        </td>
        <td>
            <div id="table_div" style="width: 350px; height: 350px;"></div>
        </td>
    </tr>
</table>
Javascript: 

chart1();
chart2();
function chart1() {
    google.load("visualization", "1", {
        packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Year', 'USD'],
            ['RSC Company', 1264383.00]
        ]);
        var options = {
            title: 'RSC Shipment Weekly: 27',
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
};
function chart2() {
    google.load("visualization", "1", {
        packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Year', 'Conts'],
            ['RSC Company', 10]
        ]);
        var options = {
            title: 'RSC Shipment Weeky: 27',
            colors: ['#FF0000']
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('table_div'));
        chart.draw(data, options);
    }
}

CHECK THIS 

       google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
                 google.visualization.events.addListener(chart, 'onmouseover', uselessHandler2);
         google.visualization.events.addListener(chart, 'onmouseout', uselessHandler3);
        chart.draw(data, options);
function uselessHandler2() {
 $('#chart_div').css('cursor','pointer')
  }  
        function uselessHandler3() {
 $('#chart_div').css('cursor','default')
  }

使用这个…

改变鼠标光标的另一种方法

对于那些不喜欢使用jQuery并希望手动设置样式而不是使用CSS类的人，您可以通过使用document.getElementById()方法获得Id属性，如下所示，只需确保访问正确的父div: 

google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'onmouseover', mouseHandlerPointer);                 
google.visualization.events.addListener(chart, 'onmouseout', mouseHandlerDefault);
function mouseHandlerPointer() {
   document.getElementById('chart_div').style.cursor = 'pointer';
 }  
function mouseHandlerDefault() {
   document.getElementById('chart_div').style.cursor = 'default';
 }

让它只在轴标签上显示的方法:

var element = document.getElementById('<?= $chartId; ?>');
var chart = new google.visualization.BarChart(element);
var $element = jQuery(element);
chart.draw(data, options);
$element.on('mouseover', 'g', function () {
    if (this.logicalname && this.logicalname.match(/vAxis/))
        $element.css('cursor', 'pointer');
}).on('mouseout', 'g', function () {
    $element.css('cursor', 'default');
});

将vAxis更改为hAxis，使其在水平轴上工作

相关文章：