尝试绘制多个甘特图仅绘制%1

Question

我正在使用Google Charts Gantt在我的页面中绘制几个图表，这是代码：

function drawGantt() {

  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 els = document.getElementsByClassName("gantt-chart");

    for(i = 0; i < els.length; i++){

        var el = els[i];

        var options = {
            width: 1100,
            height: 400,
            chartArea: {width: '100%', height: '100%'},
            gantt: {
                trackHeight: 30
            }
        };

        var chart = new google.visualization.Gantt(el);
        chart.draw(data, options);
    }
}

正如你在最后看到的，我使用了一个遍历HTML中的元素的循环，并为每个元素分配了一个图表，但结果是除了1以外的所有图表都是空的，每次都是随机呈现的。

我读过this article，它涉及一个与不同图表类似的问题，但我不能真正应用该解决方案，因为我可以很容易地在页面中同时呈现15个以上的图表。

如何才能在不与draw函数冲突的情况下同时呈现所有这些图表？

提前谢谢。

Answer 1

代码在这里似乎工作得很好。

​

google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawGantt);

function drawGantt() {

  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 els = document.getElementsByClassName("gantt-chart");

  for(i = 0; i < els.length; i++){
    var el = els[i];

    var options = {
      width: 1100,
      height: 400,
      chartArea: {width: '100%', height: '100%'},
      gantt: {
        trackHeight: 30
      }
    };

    var chart = new google.visualization.Gantt(el);
    chart.draw(data, options);
  }
}

div {
  border: 1px solid #e0e0e0;
  padding: 6px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="gantt-chart"></div>
<div class="gantt-chart"></div>
<div class="gantt-chart"></div>
<div class="gantt-chart"></div>
<div class="gantt-chart"></div>
<div class="gantt-chart"></div>

​