javascript - IE8 的 IE11 模拟器的 Google 图表错误

Question

我发现 IE11 中的 IE8 模拟器存在问题，导致在使用 Google Visualization API 将图表添加到网页时出现权限被拒绝错误。

但是，我正在开发的网站上有许多页面使用图表，并且我注意到此错误仅发生在某些页面上。经过进一步调查，我发现该错误仅在调用函数以使用 for 循环渲染图形时发生(下面的代码示例)。我还注意到，这导致工具提示在 Google Chrome 中停止工作。

我可以通过在 for 循环之外按顺序手动调用每个函数来解决这个问题，当我只需要渲染少量图形(下面的示例中为 5 个)时，这很好，但对于较大的数字来说并不实用图表。

有人可以解释一下为什么使用 for 循环时会出现问题吗？是否有解决方法可以让我不必手动多次调用同一函数。

提前非常感谢您的帮助。

    // This code does not work at all in IE11 emulator mode for IE8 
// and tool tips only work for the last rendered graph in Chrome Version 33.0.1750.117 m

for ( i = 0; i < fibreCounts.length; i++ ) {    
    var divName = fibreCounts[i] + '_forecast_order_graph';
    var containerDiv = document.getElementById('forecast_order_graphs').innerHTML;
    document.getElementById('forecast_order_graphs').innerHTML = containerDiv + '<div id="' + divName + '" class="bar_chart_div" ></div>';
    createLineGraph( fibreOrderData[i], divName, fibreCounts[i], maxDates[i], poCover[fibreCounts[i]] );
}





     // This code where the call to the function that renders the graph is outside 
        // the for loop works fine in both cases

        for ( i = 0; i < fibreCounts.length; i++ ) {
            var divName = fibreCounts[i] + '_forecast_order_graph';
            var containerDiv = document.getElementById('forecast_order_graphs').innerHTML;
            document.getElementById('forecast_order_graphs').innerHTML = containerDiv + '<div id="' + divName + '" class="bar_chart_div" ></div>';
        }
        createLineGraph( fibreOrderData[0], '8f_forecast_order_graph', '8f', maxDates[0], poCover['8f'] );
        createLineGraph( fibreOrderData[1], '24f_forecast_order_graph', '24f', maxDates[1], poCover['24f'] );
        createLineGraph( fibreOrderData[2], '48f_forecast_order_graph', '48f', maxDates[2], poCover['48f'] );
        createLineGraph( fibreOrderData[3], '96f_forecast_order_graph', '96f', maxDates[3], poCover['96f'] );
        createLineGraph( fibreOrderData[4], '240f_forecast_order_graph', '240f', maxDates[4], poCover['240f'] );





      // Function that renders the graphs

        function createLineGraph( valuesArray, targetDiv, fCount, endDate, budgetAmount )
        {
            console.log( 'Start chart ' + fCount );
            var chartData = new google.visualization.DataTable();
            chartData.addColumn('string', 'Date');
            chartData.addColumn('number', 'Budget');
            chartData.addColumn('number', 'Order Requirement');
            chartData.addColumn('number', 'Build Requirement');

            var rowDate = Date.parse( 'January 1, 2013' );
            var lastRowDate = endDate + ( 7 * 86400000 );

            console.log( 'Budget : ' + budgetAmount );

            while ( rowDate < lastRowDate ) {

                var orderReq = 0;
                var buildReq = 0;

                var i;
                for( i = 0; i < valuesArray.length; i++ ) {
                    if ( valuesArray[i][1] <= rowDate ) {
                        buildReq += valuesArray[i][0]
                    }
                    if ( valuesArray[i][2] <= rowDate ) {
                        orderReq += valuesArray[i][0]
                    }
                }

                var dateString = buildDateString( rowDate );
                chartData.addRow( [dateString, budgetAmount, orderReq, buildReq] );
                rowDate += 86400000;
            }

            var options = {
                fontName: 'Arial',
                fontSize: 12,
                title : fCount + ' Forecast Order Report',
                hAxis: {title: 'Date'},
                vAxis: {title: 'Cable Length (m)', textStyle: {color: '#676767', fontName: 'Arial', fontSize: 12}},
            }
            var chart = new google.visualization.LineChart( document.getElementById( targetDiv ) );
            chart.draw( chartData, options );
            console.log( 'End chart ' + fCount );
        }

下面的数据示例，大部分数据是从 SharePoint 列表中提取的，因此需要进行大量处理才能生成这些数组。这些示例数组应该足以测试代码。

var poCover = { '8f' : 22000, '24f' : 80100, '48f' : 34400, '96f' : 64600, '240f' : 61300 };
var fibreCounts = [ '8f', '24f', '48f', '96f', '240f' ];
var maxDates = [ 1395014400000, 1395014400000, 1393545600000, 1392768000000, 1393545600000 ];

var fibreOrderData = [ 
    [
        [3374, 1395014400000, 1390176000000],
        [70, 1376002800000, 1371164400000],
        [80, 1376002800000, 1371164400000],
        [3374, 1395014400000, 1390176000000],
        [70, 1376002800000, 1371164400000],
        [80, 1376002800000, 1371164400000]
    ], 
    [
        [2313, 1395014400000, 1390176000000],
        [1164, 1384387200000, 1379548800000],
        [442, 1384387200000, 1379548800000],
        [2313, 1395014400000, 1390176000000],
        [1164, 1384387200000, 1379548800000],
        [442, 1384387200000, 1379548800000]
    ], 
    [
        [2900, 1393545600000, 1388707200000],
        [1700, 1366153200000, 1361314800000],
        [0, 1360886400000, 1356048000000],
        [2900, 1393545600000, 1388707200000],
        [1700, 1366153200000, 1361314800000],
        [0, 1360886400000, 1356048000000]
    ], 
    [
        [2700, 1392768000000, 1387929600000],
        [8921, 1381791600000, 1376953200000],
        [300, 1376953200000, 1372114800000]
        [2700, 1392768000000, 1387929600000],
        [8921, 1381791600000, 1376953200000],
        [300, 1376953200000, 1372114800000]
    ], 
    [
        [23020, 1393545600000, 1388707200000],
        [23630, 1393545600000, 1388707200000],
        [5800, 1393545600000, 1388707200000],
        [23020, 1393545600000, 1388707200000],
        [23630, 1393545600000, 1388707200000],
        [5800, 1393545600000, 1388707200000]
    ] 
];

Answer 1

您的for循环的问题是这样的:

document.getElementById('forecast_order_graphs').innerHTML = containerDiv + '<div id="' + divName + '" class="bar_chart_div" ></div>';
createLineGraph(fibreOrderData[i], divName, fibreCounts[i], maxDates[i], poCover[fibreCounts[i]]);

每次循环时，您都会将容器的 HTML 内容作为字符串，附加一个新的 div 字符串，用新字符串替换容器的 HTML 内容，并在新的 div 中绘制图表。这会从之前绘制的图表中复制 SVG，但图表的事件处理程序会丢失，因此不会生成工具提示。

这里正确的方法是使用 document.createElement 方法创建新的 div 并将它们附加到容器 div 中:

var containerDiv = document.getElementById('forecast_order_graphs');
for ( i = 0; i < fibreCounts.length; i++ ) {    
    var divName = fibreCounts[i] + '_forecast_order_graph';
    var newDiv = document.createElement('div');
    newDiv.id = divName;
    containerDiv.appendChild(newDiv);
    createLineGraph(fibreOrderData[i], divName, fibreCounts[i], maxDates[i], poCover[fibreCounts[i]]);
}