在 Dygraphs 中限制时间的 dyLimit

Question

我正在尝试用两条水平线绘制dygraph plot（条形图感谢对的回答），但是不在整个 OX 轴范围内。

我现在拥有的是：

而我想要的是：

我唯一知道如何获得的是（但这不是我想要的）：

有谁知道我的目标有可能实现吗？如果有任何帮助，我将不胜感激！

我重现剧情的代码：

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

您可以通过使用 e.dygraph.toDomYCoord() 和 e.dygraph.toDomXCoord() 投影点坐标，ctx.fillStyle 到 [=21=，在绘图仪功能中向 dygraph 添加线条] 颜色和 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))

然后你得到：

在 Dygraphs 中限制时间的 dyLimit

dyLimit for limited time in Dygraphs

javascript

r

dygraphs