Google Visualization API を使用して Web ページにグラフを追加すると、IE11 の IE8 エミュレータがPermission Deniedエラーを引き起こす問題を認識しています。
しかし、開発中の Web サイトでグラフを使用するページが多数あり、このエラーが特定のページでのみ発生していることに気付きました。さらに調査したところ、関数を呼び出して 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]
]
];