Estoy creando múltiples gráficos de barras con dos ejes en la misma página. Funciona bien en Chrome, pero no funciona en IE . En IE muestra un error
“El objeto no admite propiedad o método ‘contiene'”
Código HTML y JavaScript de la siguiente manera:
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); };
A continuación se muestra un ejemplo, con los cambios necesarios, para múltiples Gráficos de materiales
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); };
Supongo que esto sigue siendo un error de la API de visualización de Google. ( enlace )
Sin embargo, cambié el gráfico de barras en un columnChart y cambié las opciones para el eje para que funcionen con el gráfico de columnas y funcionó.
Sin embargo, este https://jsfiddle.net/5b8au8t4/1/ está funcionando.
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); }