javascript - 如何在下面的图上显示所有月份(轴刻度/中断)？ (右)

Question

根据提供的 R 代码和数据，使用 dygraph 库(js dygraph 的 R 接口(interface))

library(xts)
library(htmlwidgets)
library(dygraphs)

date <- c("2015-01-01", "2015-02-01", "2015-03-01", "2015-04-01", "2015-05-01", "2015-06-01", "2015-07-01", "2015-08-01", "2015-09-01", "2015-10-01","2015-11-01", "2015-12-01")

revenue <- c(81920, 75240, 70840, 66560, 72140, 71160, 73880, 73900, 69160, 75940, 76100, 76020)

rate <- c(5.10, 5.15, 4.41, 4.33, 4.39, 4.62, 4.58, 4.67, 4.40, 4.85, 4.83, 4.76)

data <- data.frame(date, revenue, rate)
data$date <- as.Date(data$date, format="%Y-%m-%d")

#convert data to xts object
data <- xts(x=data, order.by = data$date)

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

customTicker <- 'function(min, max, pixels, opts) {
            return Dygraph.getDateAxis(min, max, Dygraph.Granularity.MONTHLY, opts, this);
          }'

dygraph(data, main = "Revenue & Rate") %>%
  dyAxis("x", rangePad = 40, drawGrid = FALSE, axisLabelFormatter=JS(getMonth)) %>%
  dyAxis("y", label = "Revenue", valueRange = c(0, 100000), independentTicks = TRUE)%>%
  dyAxis("y2", label = "Rate ", valueRange = c(0, 10), independentTicks = TRUE) %>%
  dyBarSeries('revenue', label="revenue",color = "#0099F9") %>% 
  dySeries('rcrate', label="rate",color = "#15354A", axis=('y2'), strokeWidth=4, pointSize=3, drawPoints=TRUE)

如何让所有月份显示在日期轴上，而不只是选择几个月份(在最大绘图大小下，显示所有月份。我希望所有月份始终显示，而不管绘图大小如何)。

ticker=JS(customTicker) dyAxis("x" ...) 中的参数似乎不起作用。 Probs 与 Dygraph.getDateAxis 有关...(我没有正确引用当前 dygraph 对象？)

另一位用户使用js版本询问了这个问题，How to show all months with dygraphs?

这是 fiddle :https://jsfiddle.net/wvsj8toc/3/

更新:

根据文档，股票代码参数采用(值，标签)对数组。我尝试在 2015 年 1 月 1 日至 2015 年 12 月 1 日运行 fiddle ，并使用 console.log 获取以下数组(对于股票行情指示器的返回值)。我将此值作为股票代码参数放入 dyAxis 中，它起作用了。

[{ v: 1420059600000，标签:“一月”}，{ v:1422738000000，标签:“二月”}，{ v:1425157200000，标签:“三月”}，{ v:1427835600000，标签:“四月” }, { v: 1430427600000, 标签: "五月"}, { v: 1433106000000, 标签: "六月"}, { v: 1435698000000, 标签: "七月"}, { v: 1438376400000, 标签: "八月"}, { v: 1441054800000, 标签: "九月"}, { v: 1443646800000, 标签: "十月"}, { v: 1446325200000, 标签: "十一月"}, { v: 1448917200000, 标签: "十二月"}];

customTicker <- 'function(a, b, pixels, opts) {
return [{    v: 1420059600000, label: "Jan"}, {    v: 1422738000000, label: "Feb"}, {    v: 1425157200000, label: "Mar"}, {    v: 1427835600000, label: "Apr"}, {    v: 1430427600000, label: "May"}, {    v: 1433106000000, label: "Jun"}, {    v: 1435698000000, label: "Jul"}, {    v: 1438376400000, label: "Aug"}, {    v: 1441054800000, label: "Sep"}, {    v: 1443646800000, label: "Oct"}, {    v: 1446325200000, label: "Nov"}, {    v: 1448917200000, label: "Dec"}];}
'
  
dygraph(data, main = "Revenue & Rate") %>%
  dyAxis("x", rangePad = 40, drawGrid = FALSE, ticker= JS(customTicker), axisLabelFormatter=JS(getMonth)) %>%
 

我如何生成这个数组？

引用文献:

https://dygraphs.com/options.html#ticker https://www.rdocumentation.org/packages/dygraphs/versions/1.1.1.6/topics/dyAxis

Answer 1

假设您有一个日期向量(就像您在问题中所做的那样)，您可以像这样创建名称-值配对数组。请记住，Javascript 对于日期有点棘手!所以一个小小的改变就可能让一切崩溃。

如果您有任何疑问，请告诉我。

ticker = "function(a, b) {
          cDts = ['2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', 
                  '2015-05-01', '2015-06-01', '2015-07-01', '2015-08-01',
                  '2015-09-01', '2015-10-01','2015-11-01', '2015-12-01'];
          x = [];
          for(i = 0; i < cDts.length; i++) {
            d = Date.parse(cDts[i]);
            e = new Date(cDts[i]);
            e.setDate(e.getDate() + 1); /*assuming you're not in Greenwich, England*/
            lab = e.toLocaleString('default', {month: 'short'});
            x[i] = {'v': d, 'label': lab};
          }
          return x
         }"

现在是具有整个功能的股票代码:

dygraph(data, main = "Revenue & Rate") %>%
  dyAxis("x", rangePad = 40, drawGrid = FALSE, 
         axisLabelFormatter=JS(getMonth),
         ticker = "function(a, b) {
          cDts = ['2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', 
                  '2015-05-01', '2015-06-01', '2015-07-01', '2015-08-01',
                  '2015-09-01', '2015-10-01','2015-11-01', '2015-12-01'];
          x = [];
          for(i = 0; i < cDts.length; i++) {
            d = Date.parse(cDts[i]);
            e = new Date(cDts[i]);
            e.setDate(e.getDate() + 1); /*assuming you're not in Greenwich, England*/
            lab = e.toLocaleString('default', {month: 'short'});
            x[i] = {'v': d, 'label': lab};
          }
          return x
         }") %>%
  dyAxis("y", label = "Revenue", 
         valueRange = c(0, 100000), independentTicks = TRUE)%>%
  dyAxis("y2", label = "Rate ",
         valueRange = c(0, 10), independentTicks = TRUE) %>%
  dyBarSeries('revenue', label="revenue",color = "#0099F9") %>% 
  dySeries('rate', label="rate", color = "#15354A", axis=('y2'), 
           strokeWidth=4, pointSize=3, drawPoints=TRUE)

这是 R 和 JS 调用 dygraph 的结果: