IE8的IE11仿真器出現Google Charts錯誤

Question

我知道在使用Google Visualization API將圖表添加到網頁時，IE11中的IE8模擬器會導致“ 權限被拒絕”錯誤。

但是，在我正在開發的網站上，有很多頁面使用圖表，並且我注意到此錯誤僅在某些頁面上發生。 在進一步的研究中，我發現僅在調用用於使用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]]);
}