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

前端未结

关注

 2  543

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

相关标签:

2条回答

小蘑菇

2020-11-28 16:43

I guess this is still a bug of the google visualization api. (link)

However, I changed the Bar chart into a columnChart and changed the options for the axis so that they work with the column chart and it did the trick.

However this https://jsfiddle.net/5b8au8t4/1/ is working.

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>

I'm hoping that this will help you.

0 讨论(0)

既然无缘

2020-11-28 16:49

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>

0 讨论(0)