dyLimit在Dygraphs的有限时间内

I'm trying to draw a dygraph plot (barplot thanks to the answer to Create a barplot in R using dygraphs package) with two horizontal lines, but not ranging the whole OX axis.

我正在尝试用两条水平线绘制一个dygraph图(条形图得益于使用dygraphs包在R中创建一个条形图的答案),但不是整个OX轴。

What I have now is:

我现在拥有的是:

And what I would like to have is:

而我想拥有的是:

The only think I know how to get is (but that is not what I want):

唯一认为我知道如何获得(但这不是我想要的):

Does anybody know is it possible to obtain my goal? I'd be greatfull for any help!

有谁知道有可能实现我的目标吗?我会很乐意为你提供帮助!

My code to reproduce the plot:

我重现情节的代码:

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))

1 个解决方案

#1

You can add lines to your dygraph within the plotter function, by using e.dygraph.toDomYCoord() and e.dygraph.toDomXCoord() to project the points coordinates, ctx.fillStyle to select color and ctx.fillRect() to draw the lines :

您可以使用e.dygraph.toDomYCoord()和e.dygraph.toDomXCoord()投影点坐标,ctx.fillStyle选择颜色和ctx.fillRect()来绘制线条:

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))

Then you get:

然后你得到: