複数のGoogle Charts、1つしか働いていない

Question

複数のGoogle Chartsを1ページ表示したい。私は解決策を探して、このサイトで解決策を見つけました。簡単に新しいグラフを作成する関数。今では1つのチャートで作業していますが、2つ目のチャートを追加してもそれ以上は機能しません。 JsonとdivのIDは正しいですが、どちらもチャートの1つのみコードを使用しているときにどちらも動作します。どのようなアイデアが問題/解決策ですか？

$(function() { 
var jsonDataClicks = $.ajax({ 
    url: 'ajax/get-total-clicks.php', 
    dataType: 'json', 
    async: false 
    }).responseText; 

var jsonDataActiveProducts = $.ajax({ 
    url: 'ajax/get-total-active-products.php', 
    dataType: 'json', 
    async: false 
    }).responseText; 

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

google.charts.setOnLoadCallback(function() { 
    drawChart(jsonDataClicks, 'total_clicks'); 
}); 

google.charts.setOnLoadCallback(function() { 
    drawChart(jsonDataActiveProducts, 'total_active_products'); 
}); 

function drawChart(dataInput, containerID) { 
    var data = new google.visualization.DataTable(dataInput); 
    var containerDiv = document.getElementById(containerID); 

    var options = { 
     vAxis: { 
      gridlines: { 
       color: '#ebebeb' 
      } 
     }, 
     animation: { 
      startup: true, 
      duration: 1000, 
      easing: 'out' 
     }, 
     hAxis: { 
      slantedText: true, 
      slantedTextAngle: 45, 
      textStyle : { 
       fontName: 'Lato', 
       fontSize: 11, 
       color: '#6f6f6f' 
      } 
     }, 
     vAxis: { 
      textStyle: { 
       fontName: 'Lato', 
       fontSize: 11, 
       color: '#6f6f6f' 
      } 
     }, 
     tooltip: { 
      textStyle: { 
       fontName: 'Lato', 
       fontSize: 11, 
       color: '#6f6f6f' 
      } 
     }, 
     width: 1160, 
     height: 400, 
     chartArea: {'width': '80%', 'height': '80%'}, 
     colors: ['#47ab8b'], 
     legend: 'none' 
    }; 

    var chart = new google.visualization.ColumnChart(containerDiv); 

    chart.draw(data, options); 
} 

}）;

Answer 1

方法 - >google.charts.setOnLoadCallbackは - 本当に唯一google.charts.load声明も

から'callback'は、非常に$.ajax呼び出しのためasync: falseを使用していないをお勧めします追加、

代わりに、ページのロードごとに一度呼び出されるべき

上にグラフを描画することができます。$.ajax({}).done

は次のような類似の設定をお勧めします...

$(function() { 
    google.charts.load('current', { 
    'callback': function() { 

     drawChart('ajax/get-total-clicks.php', 'total_clicks'); 
     drawChart('ajax/get-total-active-products.php', 'total_active_products'); 

     function drawChart(dataURL, containerID) { 
     $.ajax({ 
      url: dataURL, 
      dataType: 'json' 
     }).done(function (dataInput) { 
      var data = new google.visualization.DataTable(dataInput); 
      var containerDiv = document.getElementById(containerID); 

      var options = { 
       vAxis: { 
        gridlines: { 
         color: '#ebebeb' 
        } 
       }, 
       animation: { 
        startup: true, 
        duration: 1000, 
        easing: 'out' 
       }, 
       hAxis: { 
        slantedText: true, 
        slantedTextAngle: 45, 
        textStyle : { 
         fontName: 'Lato', 
         fontSize: 11, 
         color: '#6f6f6f' 
        } 
       }, 
       vAxis: { 
        textStyle: { 
         fontName: 'Lato', 
         fontSize: 11, 
         color: '#6f6f6f' 
        } 
       }, 
       tooltip: { 
        textStyle: { 
         fontName: 'Lato', 
         fontSize: 11, 
         color: '#6f6f6f' 
        } 
       }, 
       width: 1160, 
       height: 400, 
       chartArea: {'width': '80%', 'height': '80%'}, 
       colors: ['#47ab8b'], 
       legend: 'none' 
      }; 

      var chart = new google.visualization.ColumnChart(containerDiv); 
      chart.draw(data, options); 
     }); 
     } 
    }, 
    'packages':['corechart'] 
    }); 
});