javascript - 谷歌图表 : Drawing Multiple Charts in IE

Question

我正在尝试使用谷歌图表将一些数据可视化为 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]));

Answer 1

我遇到了同样的问题并在 this issue 中找到了解决方案关于 GitHub 上的 google-visualization-issues。它似乎是版本 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>