Попытка нарисовать несколько диаграмм Ганта рисует только 1

Question

Я использую Google Диаграммы Ганта, чтобы нарисовать несколько диаграмм в моей странице, это код:

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>