Блог

Мы создавали приложение с использованием API Google Charts. Все работает в большинстве поддерживаемых нами браузеров, но 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. Все остальные данные остаются как есть.

В нашем HTML мы запрещаем режим совместимости с IE, и мы убедились, что браузер соблюдает это и выполняет рендеринг в режиме IE8, мы используем HTML5 doctype (ie: DOCTYPE html ), и мы используем пустой html элемент для запуска документа.

Если требуется дополнительная информация, я с радостью ее предоставлю.

РЕДАКТИРОВАТЬ: используемые данные ранее были искажены. Ссылка на образец данных была изменена для ссылки на новый исправленный формат, который по-прежнему вызывает те же проблемы.

РЕДАКТИРОВАТЬ 2: arraytodatable больше не используется после исправления структуры данных.

ПРАВКА 3: добавлен поиск и обработка данных перед вызовом drawChart() .

Во-первых, вы не должны использовать преобразование строки в дату, которое предоставляют объекты Date. Эта функция несовместима в разных браузерах, и даже с одним и тем же браузером пользователи в разных странах будут по-разному анализировать строки даты. В качестве примера:

 new Date('06-08-2014')
  

может отображаться как 8 июня 2014 года для пользователя в США, но 6 августа 2014 года для пользователя в Европе.

Вы должны вручную проанализировать свои строки даты соответствующим образом. Я предположу для этого примера, что ваши строки даты находятся в формате '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 , это все еще необработанный объект, а не надлежащий объект данных. Вам необходимо преобразовать его в объект с данными либо перед передачей его в drawChart функцию, либо в drawChart функцию:

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

Кроме того, вы должны настроить свой серверный код так, чтобы числа выводились в виде чисел, а не строк (например, "0" должно быть 0 ).

Пример: http://jsfiddle.net/asgallant/a2uNj /