Google Charts: disegno di più grafici a barre con doppio asse in IE

Sto creando più grafici a barre con doppio asse sulla stessa pagina. Funziona bene in chrome ma non funziona in IE . In IE mostra un errore

“L’object non supporta la proprietà o il metodo ‘contiene'”

Codice HTML e JavaScript come segue:

startChart(); function startChart() { var data = new google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { width: 900, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { y: { distance: { label: 'parsecs' }, // Left y-axis. brightness: { side: 'right', label: 'apparent magnitude' } // Right y-axis. } } }; var chart = new google.charts.Bar(document.getElementById('dual_y_div')); chart.draw(data, options); var chart1 = new google.charts.Bar(document.getElementById('dual_y_div1')); chart1.draw(data, options); }; 
   

    Di seguito è riportato un esempio, con le modifiche necessarie, per più grafici materiali

     google.charts.load('41', {packages: ['bar']}); google.charts.setOnLoadCallback(startChart); function startChart() { var data = new google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { width: 900, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { y: { distance: { label: 'parsecs' }, // Left y-axis. brightness: { side: 'right', label: 'apparent magnitude' } // Right y-axis. } } }; var chart = new google.charts.Bar(document.getElementById('dual_y_div')); chart.draw(data, options); var chart1 = new google.charts.Bar(document.getElementById('dual_y_div1')); chart1.draw(data, options); }; 
          

    Immagino che questo sia ancora un bug dell’API di visualizzazione di Google. ( link )

    Tuttavia, ho modificato il grafico a barre in un columnChart e modificato le opzioni per l’asse in modo che funzionassero con il grafico a colonne e ha funzionato.

    Tuttavia questo https://jsfiddle.net/5b8au8t4/1/ funziona.

     startChart(); function startChart() { var data = new google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { width: 900, title: 'Nearby galaxies', vAxes: { 0: { title: 'parsecs', }, 1: { title: 'apparent magnitude', }, }, series: { 0:{ targetAxisIndex:0, }, 1:{ targetAxisIndex:1, }, }, }; var chart = new google.visualization.ColumnChart(document.getElementById('dual_y_div')); chart.draw(data, options); var chart1 = new google.visualization.ColumnChart(document.getElementById('dual_y_div1')); chart1.draw(data, options); }