2017-04-18 2 views
1

Ich versuche, eine dygraphs mit 2-Serie eine Art zu bauen: streuen eine andere Art: Fehlerbalken, aber es scheint, wie es nur kann entweder eine Anzeige:Kombination Streuung und customBars in Dygraphs

Dies ist mein Code:

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="dygraph.js"></script> 
<link rel="stylesheet" src="dygraph.css" /> 
</head> 
<body> 

<div id="container" style="width:1000px; height:600px;"></div> 
<script type="text/javascript"> 

new Dygraph(
document.getElementById("container"), 
    [ 
     [new Date("2016/2/3"), [1,3,6], [4]], 
     [new Date("2016/3/3"), [1,3,6], [3]], 
     [new Date("2016/4/3"), [1,3,6], [1]], 
     [new Date("2016/5/3"), [1,3,6], [2]], 
     [new Date("2016/6/3"), [1,3,6], [6]], 
     [new Date("2016/7/3"), [1,3,6], [5]] 
    ], 
{ 
    labels: [ "Date", "SD" , "Scatter"], 
    showRangeSelector: true, 
    customBars: true, 
    drawPoints: true, 
    series: { 
     "SD" : { 

     }, 
     "Scatter" : { 
      customBars: false, 
      strokeWidth: 0.0 
     } 
    }, 
    includeZero: true 

} 
); 
</script> 
</body> 
</html> 

Wenn customBars kommentiert sind, wird das Streudiagramm angezeigt. Wenn nicht, werden benutzerdefinierte Balken angezeigt. Niemals beides. Hier ist die picture

hier ist die JSfiddle

Jede Hilfe sehr geschätzt wird !! Vielen Dank!

+0

Hallo @Justine, ich kann Ihre JSfiddle wie die Verweise auf die dygraphs Bibliotheken nicht gesetzt sind nicht ausgeführt werden. Welche Version verwendest du? Könnten Sie die JSfiddle reparieren, um Ihr Beispiel ausführen zu können? Grüße –

+0

Ok, ich habe die externen Quellen https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.css und https://cdnjs.cloudflare.com/ajax/libs/dygraph/ hinzugefügt. 2.0.0/dygraph.js und es funktioniert jetzt. Ich werde versuchen, eine Lösung zu finden;) –

Antwort

2

Ich bin mir nicht sicher, ob es möglich ist, benutzerdefinierte Balkendiagramme mit nicht benutzerdefinierten Balkendiagrammen zu mischen. Aber ich habe die nächste Lösung für Ihr Problem gefunden. Warum erstellen Sie das gewünschte Diagramm nicht ohne benutzerdefinierte Leiste als benutzerdefinierte Leiste ohne benutzerdefinierte Leiste? Im Folgenden überlasse ich Ihnen meine Lösung.

Ich hoffe, dass dies eine Lösung für Sie sein könnte;)

new Dygraph(
 
    document.getElementById("container"), 
 
\t [ 
 
\t  [new Date("2016/2/3"), [1,3,6], [4,4,4]], 
 
\t  [new Date("2016/3/3"), [1,3,6], [3,3,3]], 
 
\t  [new Date("2016/4/3"), [1,3,6], [1,1,1]], 
 
\t  [new Date("2016/5/3"), [1,3,6], [2,2,2]], 
 
\t  [new Date("2016/6/3"), [1,3,6], [6,6,6]], 
 
\t  [new Date("2016/7/3"), [1,3,6], [5,5,5]] 
 
\t ], 
 
\t { 
 
     labels: [ "Date", "SD" , "Scatter"], 
 
     showRangeSelector: true, 
 
     customBars: true, 
 
     drawPoints: true, 
 
      
 
\t \t \t series: { 
 
\t \t \t \t "SD" : { 
 
\t \t \t \t \t 
 
\t \t \t \t }, 
 
\t \t \t \t "Scatter" : { 
 
\t \t \t \t \t strokeWidth: 1 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t includeZero: true 
 
\t \t \t 
 
\t \t } 
 
\t);
<link href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.js"></script> 
 
<div id="container" style="width:1000px; height:600px;"></div>

+1

Sie haben Recht, dass 'customBars' (d. H. Datenformat) kann nicht pro Serie festgelegt werden. Ihre Problemumgehung ist die beste Option. Siehe https://github.com/danvk/dygraphs/issues/319 – danvk

+0

Got it! Danke soooooo viel !!! : D – Justine

+0

Sie sind herzlich willkommen @Justine. Wenn Sie die Antwort für richtig halten, würden Sie so gut abstimmen und sie als korrekt markieren? Vielen Dank! –