谷歌图表：在IE中绘制双轴的多个条形图
我在同一页面上创build了双轴的多个条形图。 它在Chrome中工作正常，但在IE中不起作用 。 在IE中显示一个错误
“对象不支持属性或方法”包含“”
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>
以下是一个示例，需要对多个材质图表进行更改
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>
我想这仍然是谷歌可视化API的错误。 （ 链接 ）
但是，我将条形图更改为columnChart，并更改了轴的选项，以便它们与柱形图一起工作，并且实现了诀窍。
但是这个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>
