Google 图表：在 IE 中绘制双轴多条形图

Question

我正在同一页面上创建多个双轴条形图。它在 chrome 中工作正常，但 在 IE 中不工作。在 IE 中显示错误

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

HTML&JavaScript代码如下：

      

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

我想这仍然是 google 可视化 api 的一个错误。 (link)

但是，我将条形图更改为柱形图并更改了轴的选项，以便它们可以与柱形图一起使用，并且成功了。

但是这个 https://jsfiddle.net/5b8au8t4/1/ 有效。

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>

希望对您有所帮助。

Answer 2

以下是一个示例，其中包含多个 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>

Google 图表：在 IE 中绘制双轴多条形图

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

jquery

charts

google-visualization

bar-chart