我在这里所做的是,我可以改变光标样式为指针,当鼠标悬停在列与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
,使其在水平轴上工作