如何在Share Point 2013中将点击事件应用于Google图表 [英] How to apply click events to Google charts in Share Point 2013
问题描述
我使用Google图表创建了堆积柱形图，然后将excel文件导入共享点"列表，我想向我的图表添加点击事件，我具有图表代码，但我不知道如何添加点击 事件到图表.
I am created stacked column chart using Google charts,then I import the excel file to Share Point list,I want to add click events to my Charts i have code for Charts but i don't have idea how to add click events to charts .
在下面附上我的代码，请任何人建议我如何获得此效果.
In below am attached my code,Please any one suggest me how to get this effects.
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javascript"></script>
<script language="javascript">
var returnedItems = null;
function loadGoogleLibAndDraw(){
google.charts.load('visualization', '1', {packages: ['corechart']});
google.charts.setOnLoadCallback(visualizeData);
}
function visualizeData() {
var context = new SP.ClientContext();
var list = context.get_web().get_lists().getByTitle(document.getElementById('customListName').value);
var caml = new SP.CamlQuery();
caml.set_viewXml("<View></View>");
returnedItems = list.getItems(caml);
context.load(returnedItems);
context.executeQueryAsync(onSucceededCallback, onFailedCallback);
}
function onSucceededCallback(sender, args) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'DM');
data.addColumn('number', 'Offshore');
data.addColumn('number', 'Onsite');
var enumerator = returnedItems.getEnumerator();
var markup = '';
while (enumerator.moveNext()) {
var row = [];
var listItem = enumerator.get_current();
row.push(listItem.get_item('Title'));
row.push(listItem.get_item('Offshore'));
row.push(listItem.get_item('Onsite'));
data.addRow(row);
}
var options = {
chart: {
title: 'Head count',
},
isStacked: true,
colors: [
'#FF8080',
'#8080FF',
'#FF0000',
'#0000FF']
};
var barChart = new google.visualization.ColumnChart(document.getElementById('BarChart'));
barChart.draw(data, options);
}
function onFailedCallback(sender, args) {
var markup = '<p>The request failed: <br>';
markup += 'Message: ' + args.get_message() + '<br>';
displayDiv.innerHTML = markup;
}
</script>
</head>
<body onload="loadGoogleLibAndDraw()">
<form name="metricsform" id="metricsform">
<input id="customListName" name="customListName" value="Headcount" type="hidden"/>
</form>
<div>
<div id="displayDiv"></div>
<div id="BarChart" style="width: 700px; height:500px;"></div>
</div>
</body>
</html>
推荐答案
您好Suhadivya，
如果您想吸引用户点击，则需要监听图表引发的事件.
要监听事件，请调用google.visualization.events.addListener()传递一个句柄图表，要捕获的事件的名称以及事件发生时要调用的处理程序的名称 被抛出.
To listen for events, call google.visualization.events.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.
阅读以下文章以了解更多信息:
https://developers.google.com/chart/interactive/docs/basic_interactivity
演示:
如果您对Google图表有其他疑问，建议您与Google图表支持联系:
Linda(张)
这篇关于如何在Share Point 2013中将点击事件应用于Google图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
