jquery - sankey - Google Charts: dibujar múltiples gráficos de barras con doble eje en IE

tabla google chart

Question

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);

      };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={''modules'':[{''name'':''visualization'',''version'':''1.1'',''packages'':[''bar'']}]}"></script>
<div id="dual_y_div" style="width: 900px; height: 500px;"></div>
<div id="dual_y_div1" style="width: 900px; height: 500px;"></div>

Answer 1

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);

      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={''modules'':[{''name'':''visualization'',''version'':''1.1'',''packages'':[''corechart'']}]}"></script>
<div id="dual_y_div" style="width: 900px; height: 500px;"></div>
<div id="dual_y_div1" style="width: 900px; height: 500px;"></div>

Espero que esto te ayude.

Answer 2

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);
};

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
  <div id="dual_y_div" style="width: 900px; height: 500px;"></div>
  <div id="dual_y_div1" style="width: 900px; height: 500px;"></div>
</body>