jquery - Google Charts: Drawing Multiple Bar Charts with dual axis in IE

Question

Welcome To Ask or Share your Answers For Others

jquery - Google Charts: Drawing Multiple Bar Charts with dual axis in IE

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

jquery - Google Charts: Drawing Multiple Bar Charts with dual axis in IE

I'm creating multiple bar charts with dual axis on the same page. It works fine in chrome but it doesn't work in IE. In IE it shows an error

"Object doesn't support property or method 'contains'"

HTML & JavaScript code as follows:

      

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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-17T00:08:38+0000

Following is an example, with the changes needed, for multiple Material Charts

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>

Categories

jquery - Google Charts: Drawing Multiple Bar Charts with dual axis in IE

jquery - Google Charts: Drawing Multiple Bar Charts with dual axis in IE

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags