Question

概要：包含空数组值的图表在Firefox中正确显示，但在IE或Chrome中无法显示。但是，包含空值的数据子集在所有三个浏览器中都能正确显示。

我已经在Firefox（v20.0.1），IE10（v10.0.9200，更新版本10.0.4）和Chrome（v26.0.1410.64）中创建了一个可以在Win7上正确呈现的图表，它看起来像这样：

DynChartDemo displayed in Chrome

注意10月22日探测器D3和12月26日探测器D1之间的对角线。我们有一个业务规则，必须始终是相邻探测器的中间探测器，以显示连接器;否则，我插入一个如下所示的空值来“断开”检测器。

[新日期（“2012/10/22 03:26:59”），3]，
[新日期（“2012/10/22 03:27:60”），null]，< br /> [新日期（“2012/12/26 01:18:10”），1]，

这在Firefox中起了作用：

DynChartDemo2 displayed in Firefox

...但不在Chrome或IE中：

DynChartDemo2 displayed in IE

奇怪的是，所有三种浏览器都能正确显示数据的子集。

Zoomed DynChartDemo_small displayed in Chrome

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>&nbsp;Click & Drag</i></b> to select an area to magnify.<br>
<B><I>&nbsp;Shift-Click & Drag</i></b> to pan.<br>
<B><I>&nbsp;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>

<小时/> 底线：如何在Chrome和IE以及Firefox中显示整个1500+记录数据集？

Answer 1

检查错误控制台。它说：

dygraphs: x value in row 1612 is not a Date (stacktrace.js:31:25)

如果你查看数据集中的那一行，你会发现：

[ new Date("2012/10/22 03:27:60"), null],

＆＃34;：60＆＃34;某些浏览器接受但不接受其他浏览器。日期解析是跨浏览器不一致的well-known来源。最好保持直线和狭窄。

Dygraphs：无法在IE和Chrome中解析具有空值的图形

1 个答案: