Краткий обзор. График, содержащий нулевые значения массива, правильно отображается в Firefox, но не в IE или Chrome. Однако подмножество данных, содержащих нулевые значения, правильно отображается во всех трех браузерах.
Я создал график, который правильно отображается на Win7 в Firefox (v20.0.1), IE10 (v10.0.9200, версия обновления 10.0.4) и Chrome (v26.0.1410.64), где он выглядит так:
Обратите внимание на диагональную линию между детектором D3 22 октября и детектором D1 26 декабря. У нас есть бизнес-правило, согласно которому всегда должно быть промежуточное обнаружение на соседнем детекторе, чтобы отобразить соединитель; в противном случае я вставляю нулевое значение, как показано ниже, чтобы «отключить» детекторы.
[ новая дата("22.10.2012 03:26:59"), 3],
[ новая дата("22.10.2012 03:27:60"), null],
[ новая Дата("2012/12/26 01:18:10"), 1],
Это хорошо работает в Firefox:
... но не в Chrome или IE:
Любопытно, что часть данных корректно отображается во всех трех браузерах.
Единственная разница между DynChartDemo и DynChartDemo2 заключается в добавлении пустых записей в массив данных. Единственная разница между DynChartDemo2 и DynChartDemo_small (представлена ниже) заключается в том, что я удалил около 1500 записей данных из оставшихся записей массива.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<script type="text/javascript" src="dygraph-combined.js"></script>
</head>
<body>
<div style="font-family:tahoma,arial,sans-serif;text-size:120%;border:2px solid;border-radius:15px;background-color:Bisque;padding:4px;width:420px">
<B><I> Click & Drag</i></b> to select an area to magnify.<br>
<B><I> Shift-Click & Drag</i></b> to pan.<br>
<B><I> Double-Click</i></b> to restore (zoom out to) the original view.</div>
<P/>
<table><row>
<td><div id="graphdiv2" style="width:1200px; height:300px;border:2px solid;border-radius:15px;background-color:Bisque;"></div></td>
<td valign="top"><div id="chartLabelsContainer" style="padding:4px;width:140px;border:1px solid black;border-radius:10px;background-color:Bisque;box-shadow:4px 4px 4px #888;"></div></td>
</row></table>
<script>
var vGraph2 = new Dygraph(document.getElementById("graphdiv2"),
[
[ new Date("2012/10/01 00:00:00"),null ],
[ new Date("2012/10/21 14:30:32"), 1],
[ new Date("2012/10/21 14:30:43"), 1],
[ new Date("2012/10/21 14:32:31"), 1],
[ new Date("2012/10/21 14:32:51"), 1],
[ new Date("2012/10/21 14:33:09"), 1],
[ new Date("2012/10/21 18:22:16"), 1],
[ new Date("2012/10/21 18:22:20"), 1],
[ new Date("2012/10/21 18:22:58"), 1],
[ new Date("2012/10/21 22:53:51"), 1],
[ new Date("2012/10/21 22:54:31"), 1],
[ new Date("2012/10/21 22:54:32"), null],
[ new Date("2012/10/21 23:02:52"), 3],
[ new Date("2012/10/21 23:07:37"), 3],
[ new Date("2012/10/21 23:16:26"), 3],
[ new Date("2012/10/21 23:19:50"), 3],
[ new Date("2012/10/21 23:29:14"), 3],
[ new Date("2012/10/21 23:30:32"), 3],
[ new Date("2012/10/21 23:36:35"), 1],
[ new Date("2012/10/21 23:38:44"), 2],
[ new Date("2012/10/21 23:50:09"), 3],
[ new Date("2012/10/21 23:53:44"), 3],
[ new Date("2012/10/21 23:59:42"), 2],
[ new Date("2012/10/22 00:01:56"), 2],
[ new Date("2012/10/22 00:07:19"), 3],
[ new Date("2012/10/22 00:07:20"), null],
[ new Date("2012/10/22 00:31:53"), 1],
[ new Date("2012/10/22 00:33:15"), 2],
[ new Date("2012/10/22 00:42:31"), 3],
[ new Date("2012/10/22 00:42:32"), null],
[ new Date("2012/10/22 00:47:53"), 1],
[ new Date("2012/10/22 00:52:05"), 2],
[ new Date("2012/10/22 01:01:01"), 3],
[ new Date("2012/10/22 01:04:49"), 3],
[ new Date("2012/10/22 01:06:14"), 2],
[ new Date("2012/10/22 01:09:42"), 1],
[ new Date("2012/10/22 01:23:19"), 1],
[ new Date("2012/10/22 01:26:46"), 2],
[ new Date("2012/10/22 01:35:13"), 3],
[ new Date("2012/10/22 01:40:35"), 3],
[ new Date("2012/10/22 01:40:40"), 3],
[ new Date("2012/10/31 23:59:59"),null ]
],
{ //open options
labels: [ "Detection Date", "Detector"],
labelsDiv: "chartLabelsContainer",
labelsSeparateLines: true,
labelsSeparateLines: true,
title: 'Detection Events for Murray cod "Homer" at Edwards Offtake',
xlabel: 'Date',
ylabel: 'Detectors',
drawPoints: true,
pointSize: 2, //default=1
highlightCircleSize: 5, //default=3
axes: { //axes options
x: { //x-axis options
valueFormatter: function(x) {return new Date(x).strftime("%d-%b-%y %H:%M:%S");},
},
y: { //y-axis options
valueFormatter: function(y) {return ' D' + y.toPrecision(1);},
ticker: function(min, max, pixels, opts, dygraph, vals)
{return [{v:1,label:"D1"},{v:2,label:"D2"},{v:3,label:"D3"}];}
}
} //close 'axes' options
} //close options
);
</script>
</body>
</html>
Итог: Как я могу отобразить весь набор данных из более чем 1500 записей в Chrome и IE, а также в Firefox?