Google Charts：在 IE 中绘制多个图表答案

【问题标题】：Google Charts: Drawing Multiple Charts in IEGoogle Charts：在 IE 中绘制多个图表
【发布时间】：2015-08-19 20:36:30
【问题描述】：

我正在尝试使用谷歌图表将一些数据可视化为 4 个不同的图表。下面是我用来绘制图表的代码示例。它适用于除 IE 之外的所有浏览器（适用于边缘）。

在 IE 中，它总是绘制第一个图表，但其余图表显示“对象不支持属性或方法‘包含’。”我可以在 IE 中毫无问题地绘制任何一个图表，但如果我添加多个图表，则会出现错误。

有什么想法吗？

var chart = [
          new google.charts.Line(document.getElementById('chart-0')),
          new google.charts.Bar(document.getElementById('chart-1')),
          new google.charts.Bar(document.getElementById('chart-2')),
          new google.charts.Bar(document.getElementById('chart-3'))
        ],
        chartData = [
          new google.visualization.DataTable({
            cols: [
              {id: 'date', label: 'Date', type: 'string'},
              {id: 'calls', label: 'Calls', type: 'number'}
            ],
            rows: Calls.totalCalls()         
          }),
          new google.visualization.DataTable({
            cols: [
              {id: 'time', label: 'Time of Day', type: 'timeofday'},
              {id: 'calls', label: 'Calls', type: 'number'},
              {id: '', type: 'string', role: 'tooltip', p: {html: true}}
            ],
            rows: Calls.hourlyCalls() 
          }),
          new google.visualization.DataTable({
            cols: [
              {id: 'day', label: 'Day of the Week', type: 'string'},
              {id: 'calls', label: 'Calls', type: 'number'}
            ],
            rows: Calls.weeklyCalls() 
          }),
          new google.visualization.DataTable({
            cols: [
              {id: 'msr', label: 'Member Service Representative', type: 'string'},
              {id: 'calls', label: 'Calls', type: 'number'}
            ],
            rows: Calls.msrCalls() 
          })
        ],
        chartOptions = [
          { 
            chart: {
              title: 'Total Calls',
              subtitle: 'From ' + formData.start + ' to ' + formData.end
            },
            height: 500,
            pointSize: 5,
            curveType: 'function',
            animation: {
              duration: 2500,
              startup: true
            },
            series: {
              0: {
                pointSize: 5,
                curveType: 'function'
              }
            },              
            legend: {position: 'none'},
            vAxis: {
              viewWindow: {
                min: 0
              }
            }
          },
          {
            chart: {
              title: 'Total Calls By Hour',
              subtitle: 'From ' + formData.start + ' to ' + formData.end
            },
            height: 500,
            animation: {
              duration: 2500,
              startup: true
            },
            tooltip: {isHtml: true},
            legend: {position: 'none'}
          },
          {
            chart: {
              title: 'Total Calls By Weekday',
              subtitle: 'From ' + formData.start + ' to ' + formData.end
            },
            height: 500,
            animation: {
              duration: 2500,
              startup: true
            },
            legend: {position: 'none'}
          },
          {
            chart: {
              title: 'Total Calls By MSR',
              subtitle: 'From ' + formData.start + ' to ' + formData.end
            },
            height: 500,
            animation: {
              duration: 2500,
              startup: true
            },
            legend: {position: 'none'}
          }
        ];
    chart[0].draw(chartData[0],google.charts.Line.convertOptions(chartOptions[0]));
    chart[1].draw(chartData[1],google.charts.Bar.convertOptions(chartOptions[1]));
    chart[2].draw(chartData[2],google.charts.Bar.convertOptions(chartOptions[2]));
    chart[3].draw(chartData[3],google.charts.Bar.convertOptions(chartOptions[3]));

【问题讨论】：

API (8+) 支持的任何版本都不起作用
神秘且难以使用图表 API 的内部错误处理进行调试
多个材料图表存在错误，请参阅我的回答here 以获取解决方法示例

标签： javascript internet-explorer charts google-visualization

【解决方案1】：

我遇到了同样的问题，并在 GitHub 上的 google-visualization-issues 上的 this issue 中找到了解决方案。它似乎是版本 42 中的一个错误，显然是当前版本。 This jsfiddle 显示解决方案。关键部分如下：

google.charts.load('41', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(loadAll);

我认为您需要先加载此脚本才能使用google.charts 调用。

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

【讨论】：