dyLimit für begrenzte Zeit in Dygraphs

Question

Ich versuche, einen dygraph plot (BarPlot dank die Antwort auf Create a barplot in R using dygraphs package) mit zwei horizontalen Linien zu zeichnen, aber reicht nicht die ganze Achse OX.

Was ich habe, ist jetzt:

Und was würde Ich mag haben ist:

Die einzige glaube, ich weiß, wie zu bekommen (aber das ist nicht was ich will):

Weiß jemand, ist es möglich, mein Ziel zu erreichen? Ich wäre für jede Hilfe dankbar!

Mein Code die Handlung zu reproduzieren:

library("dplyr") 
library("data.table") 
library("dygraphs") 
library("htmlwidgets") 

# data: 

graph_data <- structure(c(0, 584.5, 528.5, 601.3, 336.8, 0), .Dim = c(6L, 1L 
), index = structure(c(1448928000, 1451606400, 1454284800, 1456790400, 
         1459468800, 1462060800), 
        tzone = "UTC", tclass = c("POSIXct", "POSIXt")), 
.indexCLASS = c("POSIXct", "POSIXt"), tclass = c("POSIXct", "POSIXt"), 
.indexTZ = "UTC", tzone = "UTC", 
.Dimnames = list(NULL, "ile"), class = c("xts", "zoo")) 

# > graph_data 
#    ile 
# 2015-12-01 0.0 
# 2016-01-01 584.5 
# 2016-02-01 528.5 
# 2016-03-01 601.3 
# 2016-04-01 336.8 
# 2016-05-01 0.0 

getMonth <- 'function(d){ 
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 
return monthNames[d.getMonth()]; 
}' 

getMonthDay <- 'function(d) { 
var monthNames = ["Sty", "Luty", "Mar", "Kwi", "Maj", "Cze","Lip", "Sie", "Wrz", "Paź", "Lis", "Gru"]; 
date = new Date(d); 
return monthNames[date.getMonth()]+ \" \" +date.getFullYear(); }' 

# set limit: 

limit <- 600 

# drow a plot: 

dygraph(graph_data) %>% 
    dyOptions(useDataTimezone = TRUE, plotter = 
        "function barChartPlotter(e) { 
       var ctx = e.drawingContext; 
       var points = e.points; 
       var y_bottom = e.dygraph.toDomYCoord(0); // see  http://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomYCoord 

       // This should really be based on the minimum gap 
       var bar_width = 2/3 * (points[1].canvasx - points[0].canvasx); 
       ctx.fillStyle = \"blue\"; 

       // Do the actual plotting. 
       for (var i = 0; i < points.length; i++) { 
       var p = points[i]; 
       var center_x = p.canvasx; // center of the bar 

       ctx.fillRect(center_x - bar_width/2, p.canvasy, 
       bar_width, y_bottom - p.canvasy); 
       ctx.strokeRect(center_x - bar_width/2, p.canvasy, 
       bar_width, y_bottom - p.canvasy); 
       } 
       }" 
     ) %>% 
    dyLimit(limit, color = "red") %>% 
    dyRangeSelector() %>% 
    dyAxis("y", valueRange = c(0, limit), 
      label = "ile") %>% 
    dyAxis("x", axisLabelFormatter = JS(getMonthDay), 
      valueFormatter=JS(getMonthDay)) 

Answer 1

Sie können hinzufügen Zeilen zu Ihrer dygraph in der Plotter-Funktion, durch e.dygraph.toDomYCoord() und e.dygraph.toDomXCoord() Koordinaten um die Punkte zu projizieren, ctx.fillStyle Farbe und ctx.fillRect() wählen die zeichnen Linien:

dygraph(graph_data) %>% 
     dyOptions(useDataTimezone = TRUE, plotter = 
          "function barChartPlotter(e) { 
        var ctx = e.drawingContext; 
        var points = e.points; 
        var y_bottom = e.dygraph.toDomYCoord(0); // see  http://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomYCoord 

        // This should really be based on the minimum gap 
        var bar_width = 2/3 * (points[1].canvasx - points[0].canvasx); 
        ctx.fillStyle = \"blue\"; 

        // Do the actual plotting. 
        for (var i = 0; i < points.length; i++) { 
        var p = points[i]; 
        var center_x = p.canvasx; // center of the bar 

        ctx.fillRect(center_x - bar_width/2, p.canvasy, 
        bar_width, y_bottom - p.canvasy); 
        ctx.strokeRect(center_x - bar_width/2, p.canvasy, 
        bar_width, y_bottom - p.canvasy); 
        } 

        // Lines 
        var yHi=600; 
        var yLow=400; 
        var xRange=e.dygraph.xAxisRange(); 
        var xSwitch=points[3].canvasx+bar_width/2; 

        ctx.fillStyle = \"red\"; 
        ctx.fillRect(e.dygraph.toDomXCoord(xRange[0]), 
           e.dygraph.toDomYCoord(yHi), 
           xSwitch-e.dygraph.toDomXCoord(xRange[0]), 
           5); 

        ctx.fillStyle = \"green\"; 
        ctx.fillRect(xSwitch, 
           e.dygraph.toDomYCoord(yLow), 
           e.dygraph.toDomXCoord(xRange[1])-xSwitch, 
           5); 
        }" 
     ) %>% 
     dyLimit(limit, color = "red") %>% 
     dyRangeSelector() %>% 
     dyAxis("y", valueRange = c(0, limit), 
       label = "ile") %>% 
     dyAxis("x", axisLabelFormatter = JS(getMonthDay), 
       valueFormatter=JS(getMonthDay)) 

Dann erhalten Sie: