使用Javascript在Google Chart API上悬停时如何更改光标样式

Question

我在这里做的是当我在上使用CSS 悬停时，我可以将光标样式更改为指针。但是，我不知道使用Javascript 和 events.addListener

执行相同的路径

• 摘要：更改光标样式

  1. 使用 CSS （完成）
  2. 使用 Javascript （尚未）
  3. 使用 events.addListener （尚未）

Demo

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);
    }
}

Answer 1

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')
  } 

使用此...

Answer 2

更改鼠标光标的替代方法

对于那些不想使用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';
 }

Answer 3

仅在轴标签上进行操作的方法：

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以使其适用于水平轴。