我正在使用Google提供的甘特图。
当单击任何元素或实体以尝试返回行/列数据时,我添加了一个侦听器,但是它返回空,
function selectHandler() {
var selectedItem = chart.getSelection();
if (selectedItem) {
console.log(selectedItem);
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
这是我对jsfiddle的尝试:https://jsfiddle.net/30cuaarb/
选择似乎不适用于google.visualization.GanttChart
组件,但是您可以引入一个自定义选择,如下所示:
google.load("visualization", "1.1", { packages: ["gantt"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
['2014Autumn', 'Autumn 2014', 'autumn',
new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
['2014Winter', 'Winter 2014', 'winter',
new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
['2015Spring', 'Spring 2015', 'spring',
new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
['2015Summer', 'Summer 2015', 'summer',
new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
['2015Autumn', 'Autumn 2015', 'autumn',
new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
['Football', 'Football Season', 'sports',
new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
['Baseball', 'Baseball Season', 'sports',
new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
['Basketball', 'Basketball Season', 'sports',
new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
['Hockey', 'Hockey Season', 'sports',
new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
]);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var chart = new google.visualization.GanttChart(document.getElementById('chart_div'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectHandler);
google.visualization.events.addListener(chart, 'onmouseover', saveSelection);
var selectedItem; //custom selector
function saveSelection(e) {
selectedItem = { row:e.row,column:null}; //save selected item
}
function selectHandler() {
//console.log(selectedItem);
document.getElementById('result').innerHTML = selectedItem.row + " row has been selected";
}
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['gantt']}]}"></script>
<div id="chart_div"></div>
Result: <span id='result' />
@@ vadim我将如何访问selectedItem的属性,例如任务名称?