Google甘特图 [英] Google Gantt Chart

问题描述

我使用Google提供的甘特图。

我添加了一个侦听器，当我单击任何元素或实体以尝试返回行/列数据时，它将返回空值，

  function selectHandler（）{
 var selectedItem = chart.getSelection（）; 
 if（selectedItem）{
 console.log（selectedItem）; 
} 
} 
 
 google.visualization.events.addListener（图表，'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'，'任务名称'）; data.addColumn（'string'，'Resource'）; data.addColumn（'date'，'开始日期'）; data.addColumn（'date'，'结束日期'）​​; data.addColumn（'number'，'Duration'）; data.addColumn（'数字'，'完成百分比'）; data.addColumn（'string'，'Dependencies'）; data.addRows（[''2014Spring'，'Spring 2014'，'spring'，new Date（2014,2,22），new Date（2014,5,20），null，100，null]，['2014Summer' ，'2014年夏季'，'夏季'，新日期（2014,5,21），新日期（2014,8,20），null，100，null]，['2014Autumn'，'2014秋季' ，新日期（2014,8,21），新日期（2014,11,20），null，100，null]，['2014Winter'，'2014年冬季'，'冬季'，新日期（2014,11,21） ），新日期（2015,2,22），null，100，null]，['2015Spring'，'2015年春季'，'spring'，新日期（2015,2,22） 20，null，50，null]，['2015Summer'，'2015年夏季'，'summer'，新日期（2015,5,20），新日期（2015,8,20），null，0，null] ，['2015年秋'，'2015年秋'，'秋'，新日期（2015,8,21），新日期（2015,11,20），null，0，null]，['2015Winter'，'2015年冬'，'冬天'，新日期（2015,11,21），新日期（20新的日期（2014，8，4），新的日期（2015,1,1），空的，空的，0，null]，['Football'，'Football Season'，'sports' 100'，null]，['棒球'，'棒球季节'，'运动'，新日期（2015,2,31），新日期（2015,9,20），null，14，null] ，'篮球赛季'，'运动'，新日期（2014,9,28），新日期（2015,5,20），空，86，null]，['曲棍球'，'曲棍球赛季'，'运动' ，新日期（2014,9,8），新日期（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（数据，选项）; google.visualization.events.addListener（图表，'select'，selectHandler）; google.visualization.events.addListener（图表，'onmouseover'，saveSelection）; var selectedItem; //自定义选择器函数saveSelection（e）{selectedItem = {row：e.row，column：null}; //保存选定的项目} 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>结果：< span id ='result'/>

I am using the Gantt Chart provided by Google.

I have added a listener to when I click on any of the elements or entity in attempt to return the row/columns data, but it is returning empty,

    function selectHandler() {
        var selectedItem = chart.getSelection();
        if (selectedItem) {
            console.log(selectedItem);
        }
    }

    google.visualization.events.addListener(chart, 'select', selectHandler);

Here is my attempt on jsfiddle: https://jsfiddle.net/30cuaarb/

解决方案

Selection does not seem to work with google.visualization.GanttChart component, but you could introduce a custom selection as demonstrated below:

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' />

这篇关于Google甘特图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！