Question

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

在IE中，它总是绘制第一个图表，但其余图表显示＆＃34;对象不支持属性或方法＆＃39;包含＆＃39;。＆＃34;我可以在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

我遇到了同样的问题，并在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>

Google图表：在IE中绘制多个图表

1 个答案: