2016-11-02 3 views
0

Diese Frage wurde gestellt here aber nie beantwortet. Wenn ich showRoller: true zu meinem Code hinzufüge und dann auf etwas größer als 1 setze, verschwindet das Diagramm und nur der allererste Punkt am linken Rand wird gezeichnet.Warum schlägt showRoller auf dygraphs fehl mit rollPeriod> 1

Hier ist mein Code:

 g[gnum] = new Dygraph(document.getElementById(gdiv), mylines, { 
      rollPeriod: 1, 
      showRoller: true, 
      labels: mylabels, 
      drawXAxis: true, 
      drawYAxis: true, 
      drawXGrid: true, 
      drawYGrid: true, 
      valueRange: myrange, 
      ylabel: ylabel[gnum], 
      fillGraph: false, 
      labelsShowZeroValues: true, 
      highlightCircleSize: 0, 
      strokeWidth: 0.4, 
      gridLineColor: '#dedede', 
      axisLabelColor: '#999999', 
      colors: colors, 
      rightGap: 15, 
      highlightSeriesBackgroundAlpha: .6, 
      highlightSeriesOpts: { 
       strokeWidth: 0.5, 
       strokeBorderWidth: 1, 
       strokeBorderColor: "#6699ff", 
       highlightCircleSize: 4 
      }, 
      labelsDivWidth: 300, 
      labelsDivStyles: { 
       'text-align': 'right' 
      }, 
      xAxisLabelWidth: 70, 
      axisLabelFontSize: 13, 
      axes: { 
       x: { 
        pixelsPerLabel:80, 
        valueFormatter: function(ms) { 
         return ' ' + new Date(ms).strftime('%m/%d/%Y %T') + ' '; 
        }, 
        axisLabelFormatter: function(d, gran) { 
         return Dygraph.zeropad(d.strftime('%m/%d/%Y')); 
        } 
       }, 
       y: { 
        valueFormatter: function(y) { 
         //if (!y) return ' null '; 
         return ' ' + y + ' ' + yfmt[gnum] + ' '; 
        } 
       } 
      }, 
      drawCallback: function(me, initial) { 
       var xrange = me.xAxisRange(); 
       if ((xrange[0] == oldxrange[0] && xrange[1] == oldxrange[1]) || blockRedraw || initial) return; 
       else { 
        blockRedraw = true; 
        for (var j = 1; j <= maxGraphs; j++) 
        { 
         if (gnum == j) continue; // don't draw if this graph or if graph doesn't exist 
         else { 
          g[j].updateOptions({ 
           dateWindow: xrange 
          }); 
         } 
        } 
        blockRedraw = false; 
        oldxrange = xrange; 
       } 
      }, 
      underlayCallback: function(canvas, area, g) { 
       // critical threshold lines 
       var bottom_left = g.toDomCoords(new Date(first[gnum]), critical[gnum][0]); 
       var top_right = g.toDomCoords(new Date(last[gnum]), critical[gnum][0]); 
       var left = bottom_left[0]; 
       var bottom = bottom_left[1]; 
       var right = top_right[0]; 
       var top = top_right[1]+5; 
       canvas.fillStyle = "rgba(250, 0, 0, 1)"; 
       canvas.fillRect(left, bottom, right-left, 1); 

       bottom_left = g.toDomCoords(new Date(first[gnum]), critical[gnum][1]); 
       top_right = g.toDomCoords(new Date(last[gnum]), critical[gnum][1]); 
       left = bottom_left[0]; 
       bottom = bottom_left[1]; 
       right = top_right[0]; 
       top = top_right[1]+5; 
       canvas.fillStyle = "rgba(250, 0, 0, 1)"; 
       canvas.fillRect(left, bottom, right-left, 1); 

       // maintenance threshold lines 
       bottom_left = g.toDomCoords(new Date(first[gnum]), maintenance[gnum][0]); 
       top_right = g.toDomCoords(new Date(last[gnum]), maintenance[gnum][0]); 
       left = bottom_left[0]; 
       bottom = bottom_left[1]; 
       right = top_right[0]; 
       top = top_right[1]+5; 
       canvas.fillStyle = "rgba(255, 220, 0, 1)"; 
       canvas.fillRect(left, bottom, right-left, 1); 

       bottom_left = g.toDomCoords(new Date(first[gnum]), maintenance[gnum][1]); 
       top_right = g.toDomCoords(new Date(last[gnum]), maintenance[gnum][1]); 
       left = bottom_left[0]; 
       bottom = bottom_left[1]; 
       right = top_right[0]; 
       top = top_right[1]+5; 
       canvas.fillStyle = "rgba(255, 220, 0, 1)"; 
       canvas.fillRect(left, bottom, right-left, 1); 
      } 
     }); 

Ich denke es einige Konflikte mit einem meiner anderen Parameter hat? Wenn ich dygraphs Beispielcode in mein System einfüge, funktioniert es gut. Meine Daten sehen so aus ...

Tue Oct 04 2016 11:00:01 GMT-0700 (PDT),136.00,135.78,136.60,137.16, 
Tue Oct 04 2016 17:00:01 GMT-0700 (PDT),135.89,135.89,136.56,137.19, 
Tue Oct 04 2016 23:00:01 GMT-0700 (PDT),135.93,136.04,136.45,137.23, 
Wed Oct 05 2016 05:00:01 GMT-0700 (PDT),135.96,136.00,136.45,137.08, 
Wed Oct 05 2016 11:00:01 GMT-0700 (PDT),136.00,135.96,136.49,137.16, 
Wed Oct 05 2016 17:00:01 GMT-0700 (PDT),135.96,135.96,136.52,137.12, 
Wed Oct 05 2016 23:00:01 GMT-0700 (PDT),135.96,135.89,136.56,137.08, 
Thu Oct 06 2016 05:00:01 GMT-0700 (PDT),136.00,135.93,136.56,137.08, 
Thu Oct 06 2016 11:00:01 GMT-0700 (PDT),136.00,135.93,136.56,137.08, 
Thu Oct 06 2016 11:00:07 GMT-0700 (PDT),135.81,135.78,136.45,136.90, 
Thu Oct 06 2016 17:00:01 GMT-0700 (PDT),136.00,135.89,136.60,137.12, 
Thu Oct 06 2016 23:00:01 GMT-0700 (PDT),136.07,135.89,136.60,137.05, 
Fri Oct 07 2016 05:00:01 GMT-0700 (PDT),136.04,135.89,136.60,137.01, 
Fri Oct 07 2016 11:00:01 GMT-0700 (PDT),135.96,135.89,136.52,137.19, 

Eine Anmerkung: Es gibt eine große Lücke (ungefähr 10 Tage) in meinen Daten? Spielt das eine Rolle? Ich würde denken, dass dygraphs nur einen rückläufigen gleitenden Durchschnitt berechnet, egal was die Daten waren. Hier

ist die Grafik mit Rollperiode = 1 enter image description here

Und hier ist es mit Rollperiode = 2 enter image description here

Beachten Sie, dass die Punkte sind immer noch aktiv auf dem Graphen mit Rollperiode = 2. Ich kann mit der Maus über die Daten in der oberen rechten Ecke sehen. Aber die Linien sind nicht gezeichnet. Was kann das verursachen?

+0

Bitte geben Sie ein reproduzierbares Beispiel an, vorzugsweise ein Vorher und Nachher via dygraphs.com/fiddle. – danvk

+0

Das ist eine sehr komplexe Sache. Der gesamte js-Aufruf ist oben. Was brauche ich noch? Wird eine große Datenlücke das Problem verursachen? –

+0

Mein Problem ist, dass es sehr komplex ist, da ich Daten für Trendlinien, variable Verwendung, etc. habe. Meine Frage ist, welche Art von Dingen kann dazu führen, dass es nicht funktioniert? –

Antwort

0

Für alle anderen, die dieses Problem haben, habe ich gefragt, welche Art von Dingen dies verursachen könnte, damit ich weiß, wonach ich suchen soll. Ich habe es gefunden. Ich habe meine Genauigkeit mit .toFixed (2) auf 2 Dezimalstellen umgerechnet. Das konvertiert die Daten zurück in eine Zeichenfolge. Wenn Sie dieses Problem haben, überprüfen Sie Ihr Datenformat. Der Grund dafür ist verwirrend, dass der Graph mit den Zahlen, die als Strings dargestellt werden, zeichnen kann. Aber es kann nicht die Mathematik, die notwendig ist, um rollierende Mittelwerte zu berechnen, wenn die Daten Strings sind.

Hoffe das hilft anderen!

+1

Froh, dass du es herausgefunden hast! Klassisches JavaScript WTF. – danvk

Verwandte Themen