dyLimit на ограниченное время в Dygraphs

Я пытаюсь нарисовать dygraph plot (график благодаря ответу на Create гистограмма в R с использованием пакета dygraphs) с двумя горизонтальными линиями, но не по всей оси 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))

person Marta    schedule 20.04.2016    source источник
comment
Готовы ли вы принять ggplot2 решение или вам нужно использовать dygraphs?   -  person Ben    schedule 23.04.2016
comment
Мне нужно dygraph :D Я знаю, как это сделать в ggplot или rCharts.   -  person Marta    schedule 25.04.2016


Ответы (1)


Вы можете добавить линии к dygraph в функции плоттера, используя 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))

Затем вы получите: введите здесь описание изображения

person HubertL    schedule 27.04.2016
comment
Спасибо! Не могли бы вы объяснить эту часть, добавив строки, чтобы я мог обобщить ее более чем на две строки? - person Marta; 28.04.2016