与图表交互
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
到目前为止,我们已经介绍了很多网页的内容,即:您已经在网页上绘制了图表。不过,如果您希望捕获用户点击,或者需要操控图表中绘制的属性或数据,则需要监听该图表抛出的事件。
所有图表都会引发某些类型的事件。以下介绍的是其中最常见的几种原因:
- ready - 图表在网页上绘制并准备好响应方法时抛出。如果您需要从图表请求信息,请监听此事件。
- select - 用户选择图表中的某些内容(通常是通过点击条形图或饼图)时抛出。
- error - 当图表无法呈现传入的数据时抛出,通常是因为
DataTable
格式有误。
- onmouseover 和 onmouseout - 分别在用户将鼠标指针悬停在特定图表元素上或离开特定元素时抛出。
监听事件很简单:只需调用 google.visualization.events.addListener()
并传入图表的句柄、要捕获的事件的名称以及事件抛出时要调用的处理程序的名称。您可以使用任何图表句柄调用此方法,即使您尚未调用 draw()
。请注意,如果您希望监听器在被移除之前仅调用一次,则可以调用 google.visualization.events.addOneTimeListener()
。
下面的部分代码段展示了如何注册以捕获图表的 select 事件:
load libraries...
function drawChart() {
prepare data...
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
// The select handler. Call the chart's getSelection() method
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var value = data.getValue(selectedItem.row, selectedItem.column);
alert('The user selected ' + value);
}
}
// Listen for the 'select' event, and call my function selectHandler() when
// the user selects something on the chart.
google.visualization.events.addListener(chart, 'select', selectHandler);
draw the chart...
}
下面显示了带有新选择事件监听器的 Hello Charts 代码示例。亲自尝试一下吧。
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var topping = data.getValue(selectedItem.row, 0);
alert('The user selected ' + topping);
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
更多信息
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-07-10。
[null,null,["最后更新时间 (UTC):2024-07-10。"],[[["\u003cp\u003eGoogle Charts throw events like \u003ccode\u003eready\u003c/code\u003e, \u003ccode\u003eselect\u003c/code\u003e, \u003ccode\u003eerror\u003c/code\u003e, \u003ccode\u003eonmouseover\u003c/code\u003e, and \u003ccode\u003eonmouseout\u003c/code\u003e to enable user interaction and manipulation.\u003c/p\u003e\n"],["\u003cp\u003eTo catch these events, use \u003ccode\u003egoogle.visualization.events.addListener()\u003c/code\u003e to register a handler function.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003eselect\u003c/code\u003e event is commonly used to respond to user clicks on chart elements, enabling actions like displaying selected data.\u003c/p\u003e\n"],["\u003cp\u003eA provided code example demonstrates how to implement a \u003ccode\u003eselect\u003c/code\u003e event listener to display an alert with the selected data.\u003c/p\u003e\n"]]],[],null,["# Interacting With the Chart\n\nWhat we've covered so far is sufficient for many web pages: you've drawn your chart on the page. However, if you want to catch user clicks, or need to manipulate properties or data in a chart that you've already drawn, you need to listen for events thrown by the chart.\n\nAll charts throw some kinds of events. Here are the most common:\n\n- *ready* - Thrown when the chart is drawn on the page and ready to respond to methods. Listen for this event if you need to request information from the chart.\n- *select* - Thrown when the user selects something on the chart: typically by clicking on a bar or pie slice.\n- *error* - Thrown when the chart can't render the data passed in, typically because the `DataTable` format is wrong.\n- *onmouseover* and *onmouseout* - Thrown when the user mouses over or off of a specific chart element, respectively.\n\nListening for events is simple; simply call [`google.visualization.events.addListener()`](/chart/interactive/docs/reference#addlistener) passing in a handle to the chart, the name of the event to catch, and the name of a handler to call when the event is thrown. You can call this method with any chart handle, even if you haven't called `draw()` yet. Note that you can call [`google.visualization.events.addOneTimeListener()`](/chart/interactive/docs/reference#addonetimelistener) if you want the listener to be called exactly once before removing itself.\n\nHere's a partial code snippet showing how to register to catch a chart's *select* event: \n\n```javascript\nload libraries...\n\nfunction drawChart() {\n\n prepare data...\n\n var chart = new google.visualization.PieChart(document.getElementById('chart_div'));\n\n // The select handler. Call the chart's getSelection() method\n function selectHandler() {\n var selectedItem = chart.getSelection()[0];\n if (selectedItem) {\n var value = data.getValue(selectedItem.row, selectedItem.column);\n alert('The user selected ' + value);\n }\n }\n\n // Listen for the 'select' event, and call my function selectHandler() when\n // the user selects something on the chart.\n google.visualization.events.addListener(chart, 'select', selectHandler);\n\n draw the chart...\n\n}\n```\n\nThe following shows the Hello Charts code example with a new select event listener. Try it out yourself. \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003c!--Load the AJAX API--\u003e\n \u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\u003e\u003c/script\u003e\n \u003cscript type=\"text/javascript\"\u003e\n\n // Load the Visualization API and the piechart package.\n google.charts.load('current', {'packages':['corechart']});\n\n // Set a callback to run when the Google Visualization API is loaded.\n google.charts.setOnLoadCallback(drawChart);\n\n // Callback that creates and populates a data table,\n // instantiates the pie chart, passes in the data and\n // draws it.\n function drawChart() {\n\n // Create the data table.\n var data = new google.visualization.DataTable();\n data.addColumn('string', 'Topping');\n data.addColumn('number', 'Slices');\n data.addRows([\n ['Mushrooms', 3],\n ['Onions', 1],\n ['Olives', 1], \n ['Zucchini', 1],\n ['Pepperoni', 2]\n ]);\n\n // Set chart options\n var options = {'title':'How Much Pizza I Ate Last Night',\n 'width':400,\n 'height':300};\n \n // Instantiate and draw our chart, passing in some options.\n var chart = new google.visualization.PieChart(document.getElementById('chart_div'));\n\n function selectHandler() {\n var selectedItem = chart.getSelection()[0];\n if (selectedItem) {\n var topping = data.getValue(selectedItem.row, 0);\n alert('The user selected ' + topping);\n }\n }\n\n google.visualization.events.addListener(chart, 'select', selectHandler); \n chart.draw(data, options);\n }\n\n \u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003c!--Div that will hold the pie chart--\u003e\n \u003cdiv id=\"chart_div\" style=\"width:400; height:300\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n``` \n[**Next: *Security and Privacy***](/chart/interactive/docs/security_privacy)\n\n**More Information**\n\n- [Handling Events](/chart/interactive/docs/events)\n- [Controls and Dashboards](/chart/interactive/docs/gallery/controls)\n- [getSelection()](/chart/interactive/docs/reference#visgetselection)\n- [`google.visualization.events.addListener()`](/chart/interactive/docs/reference)"]]