簡體   English   中英

繪制LineChart時IE8崩潰—所有其他瀏覽器均正常工作

[英]IE8 Crashes When Drawing LineChart — All Other Browsers Work

我們一直在使用Google Charts API構建應用程序。 一切都可以在我們支持的大多數瀏覽器中運行,但是IE8引起了問題。 從技術上講,瀏覽器不會崩潰,圖表僅花費很長時間渲染,以致瀏覽器認為它已崩潰,並警告應該停止腳本。 當我們允許腳本完成時,渲染圖表花費了幾分鍾才能完全渲染。 在Chrome,FF和IE9中,圖表會立即呈現。 瀏覽器之間的巨大差異可能表明Google出現了問題,但是考慮到Google搜尋問題並沒有通過類似的問題引起太多,因此我不禁認為我們最終處理不正確。

以下是我們用於生成圖表的方法,所有內容都掛在chart.draw調用處。

function drawChart(data) {
    var options = {
        title: 'Occupancy and Volume History',
        isStacked: true,
        colors: ['#0066FF', '#53CF53', '#E0440E', '#E6693E', '#FF9900', '#009933'],
        hAxis: { format: 'MM/dd/yyyy hh:mm:SS a',
            gridlines: { color: 'transparent' }
        },
        vAxis: { viewWindow: { min: Number('0'),
            max: Number('0.96')
        },
            gridlines: { color: 'transparent'}
        },
        pointSize: 5,
        series: { 4: { pointSize: 0 },
            5: { pointSize: 0 }
        }
    };
    var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
    google.visualization.events.addListener(chart, 'error', function (e) {
        console.log(e.message);
    });
    chart.draw(data, options);
}

正在像這樣檢索和處理數據:

$.post(<path to data>,
    function (data) {
        // Format date to actual date object
        $.each(data.rows, function (i, row) {
            data.rows[i].c[0].v = new Date(row.c[0].v);
        });

        drawChart(data);
});

此處可以找到服務器端構建並傳遞給上述方法的數據示例。 在將數據傳遞到方法之前,將日期字符串轉換為JavaScript Date對象。 所有其他數據保持不變。

在我們的HTML中,我們正在阻止IE兼容模式,並且我們已驗證瀏覽器是否遵守此規范,並且正在以IE8模式進行呈現,我們正在使用HTML5 doctype(即DOCTYPE html ),並且正在使用裸露的html元素以啟動文檔。

如果需要任何進一步的信息,我很樂意提供。

編輯:以前使用的數據格式錯誤。 鏈接到示例數據已被修改為鏈接到新的更正格式,仍然存在相同的問題。

編輯2:修復數據結構后,不再使用arrayToDataTable。

編輯3:在調用drawChart()之前添加了對數據的檢索和處理。

首先,您不應使用Date對象提供的字符串到日期的轉換。 跨瀏覽器,此功能不一致,即使使用同一瀏覽器,位於不同語言環境的用戶也將以不同的方式解析日期字符串。 舉個例子:

new Date('06-08-2014')

可能會在2014年6月8日解析為美國用戶,但在2014年8月6日解析為歐洲用戶。

您應該手動解析日期字符串。 在此示例中,我將假設您的日期字符串格式為'M/d/yyyy hh:mm:ss A' 像這樣解析日期字符串:

$.each(data.rows, function (i, row) {
    var match = row.c[0].v.match(/(\d{1,2})\/(\d{1,2})\/(\d{4}) (\d{2}):(\d{2}):(\d{2}) (..)/);
    var year = parseInt(match[3], 10);
    var month = parseInt(match[1], 10) - 1; // adjust for javascript's 0-indexed months
    var day = parseInt(match[2], 10);
    var hours = parseInt(match[4], 10) + (match[7] == 'AM' ? 0 : 12); // adjust hours for AM/PM
    var minutes = parseInt(match[5], 10);
    var seconds = parseInt(match[6], 10);

    row.c[0].v = new Date(year, month, day, hours, minutes, seconds);
});

當您將data傳遞給drawChart ,它仍然是原始對象,而不是適當的DataTable。 您需要先將其轉換為DataTable對象,然后再將其傳遞給drawChart或在drawChart函數中:

var dataTable = new google.visualization.DataTable(data);

另外,您應該調整服務器代碼以將數字輸出為數字,而不是字符串(例如, "0"應為0 )。

示例: http//jsfiddle.net/asgallant/a2uNj/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM