Dygraphs : IE 및 Chrome에서 null 값을 갖는 그래프를 해결할 수 없음

개요 : null 배열 값이 포함 된 그래프는 Firefox에서는 올바르게 표시되지만 IE 또는 Chrome에서는 올바르게 표시되지 않습니다. 그러나 Null 값을 포함하는 데이터의 하위 집합은 세 브라우저 모두에서 올바르게 표시됩니다.Dygraphs : IE 및 Chrome에서 null 값을 갖는 그래프를 해결할 수 없음

나는 파이어 폭스에서 Win7에 (v20.0.1), IE10 (v10.0.9200, 업데이트 버전 10.0.4) 및 크롬 (v26.0.1410.64)에서 제대로 렌더링하는 그래프를 만들었습니다 그것은 다음과 같습니다

DynChartDemo displayed in Chrome

공지 사항 우리는 항상 인접에 중간 탐지가해야하는 비즈니스 규칙을 12월 26일 22 년 10 월 및 감지기 D1에 감지기 D3 사이의 대각선 커넥터를 디스플레이하기위한 검출기; 그렇지 않으면 아래와 같이 Null 값을 삽입하여 감지기를 "연결 해제"합니다.

신품 일 ("2012/10/22 3시 26분 59초") 3]
신품 일 널 ("2012/10/22 03:27:60"),
[새 Date ("2012년 12월 26일 1시 18분 10초"), 1],

이 작품

파이어 폭스에서 팽창 :

DynChartDemo2 displayed in Firefox

...하지만 크롬 또는 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>

결론 :가 어떻게 크롬과 IE뿐만 아니라 파이어 폭스에서 설정 한 전체 1500 + 기록 데이터를 표시 할 수 있습니까?

출처

2013-05-13 DUHdley d' Urite

dygraphs.com/fiddle을 통해 데모 링크를 제공 할 수 있습니까? 디버깅에 도움이 될 것입니다. – danvk

물론 @danvk. [다음은] (http://jsfiddle.net/eM2Mg/) 작동하는 서브 세트입니다. [this] (http://jsfiddle.net/xTh9A/)는 문제를 일으키는 전체 데이터 세트입니다. 감사. –

[This] (http : // jsfiddle.net/U7kRh /) 중급 버전 (258 개의 배열 레코드 포함)도 JSFiddle에서 올바르게 표시되며 Chrome과 IE 및 Firefox에서 전체 HTML 코드가 올바르게 표시됩니다. –

오류 콘솔을 확인하십시오. 그것은 말한다 :

당신이 당신의 데이터 세트의 해당 행을 보면

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

, 당신이 확인할 수있는 것들 :

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

을 "60"은 일부 브라우저가 아닌 다른 사람에 의해 허용됩니다. 날짜 구문 분석은 브라우저 간 불일치가있는 well-known 소스입니다. 직선과 좁은 곳에 머무르는 것이 가장 좋습니다.

출처

2013-05-15 21:24:45 danvk

감사합니다. Dan. 하지만 물론. 나는 두 번 당황 스럽다 - 먼저 "60"을 타이프하고, 그 다음에 오류 콘솔이 내게 해답을주지 못하게하라. 내 손을 잡아줘서 고마워. –

Dygraphs : IE 및 Chrome에서 null 값을 갖는 그래프를 해결할 수 없음

답변

관련 문제