首页 文章

R Highcharter:格式化工具提示

提问于
浏览
0

我有一个"stacked bar"图表,我把它放在一个更宽的栏上,看看它是否符合我的标准 . 由于一个技巧,我的图表看起来像我想要的方式(使用 grouping = FALSE 并且每列的总和是前面的列的总和) . 现在的问题是 tooltip 显示的数字不正确(正确) .

问题:有没有办法可以格式化工具提示以显示正确的数字(包括颜色点)或以不同的方式创建图形?

enter image description here

例如,图片显示 tooltip 上的数字不正确,我希望它显示:

  • DIH目标:21小时

  • 报价保留时间:6.2小时

  • 其他保持时间:19.3小时

  • 购物时间:3.4小时

码:

highchart() %>%
  hc_add_series(TopPN2, "column", hcaes(x = Incoming.P.N, y = 21), name = "DIH Goal", color = "#ffffff", borderColor = "#C8C8C8", pointPadding = -0.1) %>%
  hc_add_series(TopPN2, "column", hcaes(x = Incoming.P.N, y = round(HoldTime.Quote,1)), name = "Quote Hold Time", color = "#FF8888") %>%
  hc_add_series(TopPN2, "column", hcaes(x = Incoming.P.N, y = round(Hold.Time.Other,1)), name = "Other Hold Time", color = "#E5A919") %>%
  hc_add_series(TopPN2, "column", hcaes(x = Incoming.P.N, y = round(Shop.Time,1)), name = "Shop Time", color = "#51C1BC") %>%
  hc_xAxis(type = "category") %>%
  hc_yAxis(title = "hours", labels = list(format = "{value}hrs")) %>%
  hc_tooltip(crosshairs = TRUE, shared = TRUE, headerFormat = "<b>{point.name}</b>", valueSuffix = "hrs") %>%
  hc_plotOptions(column = list(grouping = FALSE))

数据:

> dput(TopPN2)
structure(list(Incoming.P.N = c("PN1", "PN2", "PN3", "PN4", "PN5", 
"PN6", "PN7", "PN8", "PN9", "PN10"), HoldTime.Quote = structure(c(28.8846153846154, 
32.548, 21.8717948717949, 57.4931506849315, 64.4074074074074, 
40.0833333333333, 14, 29.680790960452, 36.6506024096386, 48.1111111111111
), class = "difftime", units = "days"), Hold.Time.Other = structure(c(22.7307692307692, 
21.56, 16.7435897435897, 10.7123287671233, 47.1851851851852, 
23.1666666666667, 6, 8.17231638418079, 25.1807228915663, 24.6666666666667
), class = "difftime", units = "days"), Shop.Time = c(3.40698998178506, 
4.83416980342953, 3.33075767332046, 4.39068799583821, 5.35449386300647, 
5.20028749401054, 3.43263196751569, 5.59119496855346, 4.27753861737149, 
5.61884753901561), Quantity = c(17568, 9564, 9318, 7689, 7577, 
6261, 5418, 5088, 3949, 3332)), .Names = c("Incoming.P.N", "HoldTime.Quote", 
"Hold.Time.Other", "Shop.Time", "Quantity"), row.names = c(NA, 
-10L), class = c("tbl_df", "tbl", "data.frame"))

UPDATE

沿着只是格式化 tooltip 的路径走下去 . 我创建了新的变量来表示正确的时间,但我无法弄清楚如何在 tooltip 中输入正确的颜色点 . 在这里找到的例子:How to use the tooltip formatter and still display chart color (like it does by default)?显示了如何在JS中执行此操作,但我可以_2386231知道如何使用 color span 之间的双引号来使其获取正确的颜色 .

更新数据:

> dput(TopPN2)
structure(list(Incoming.P.N = c("PN1", "PN2", "PN3", "PN4", "PN5", 
"PN6", "PN7", "PN8", "PN9", "PN10"), Hold.Time.Quote = structure(c(28.8846153846154, 
32.548, 21.8717948717949, 57.4931506849315, 64.4074074074074, 
40.0833333333333, 14, 29.680790960452, 36.6506024096386, 48.1111111111111
), class = "difftime", units = "days"), Hold.Time.Other = structure(c(22.7307692307692, 
21.56, 16.7435897435897, 10.7123287671233, 47.1851851851852, 
23.1666666666667, 6, 8.17231638418079, 25.1807228915663, 24.6666666666667
), class = "difftime", units = "days"), Shop.Time = c(3.40528709494031, 
4.83058282849384, 3.33075767332046, 4.38978424746556, 5.35178594965072, 
5.19380460683082, 3.43263196751569, 5.59119496855346, 4.27753861737149, 
5.61884753901561), Quantity = c(17590, 9574, 9318, 7694, 7587, 
6295, 5418, 5088, 3949, 3332), HoldTimeQuoteTrue = structure(c(6.2, 
11, 5.1, 46.8, 17.2, 16.9, 8, 21.5, 11.5, 23.4), class = "difftime", units = "days"), 
    HoldTimeOtherTrue = structure(c(18.8, 16.8, 13.7, 5.7, 38.6, 
    15.3, 0, 1.9, 20, 15.4), class = "difftime", units = "days"), 
    ShopTimeTrue = c(3.4, 4.8, 3.3, 4.4, 5.4, 5.2, 3.4, 5.6, 
    4.3, 5.6)), .Names = c("Incoming.P.N", "Hold.Time.Quote", 
"Hold.Time.Other", "Shop.Time", "Quantity", "HoldTimeQuoteTrue", 
"HoldTimeOtherTrue", "ShopTimeTrue"), row.names = c(NA, -10L), class = c("tbl_df", 
"tbl", "data.frame"))

更新的代码:

highchart() %>%
  hc_add_series(TopPN, "column", hcaes(x = Incoming.P.N, y = 21), name = "DIH Goal", color = "#ffffff", borderColor = "#C8C8C8", borderWidth = 2, pointPadding = -0.1, 
                tooltip = list(pointFormat = "DIH Goal: 21 days<br>")) %>%
  hc_add_series(TopPN, "column", hcaes(x = Incoming.P.N, y = round(Hold.Time.Quote,1)), name = "Quote Hold Time", color = "#FF8888", 
                tooltip = list(pointFormat = "<span style='color:{point.color}'>\u25CF</span> Quote Hold Time: {point.HoldTimeQuoteTrue} days<br>")) %>%
  hc_add_series(TopPN, "column", hcaes(x = Incoming.P.N, y = round(Hold.Time.Other,1)), name = "Other Hold Time", color = "#E5A919", 
                tooltip = list(pointFormat = "{point.color} Other Hold Time: {point.HoldTimeOtherTrue} days<br>")) %>%
  hc_add_series(TopPN, "column", hcaes(x = Incoming.P.N, y = round(Shop.Time,1)), name = "Shop Time", color = "#51C1BC", 
                tooltip = list(pointFormat = "Shop Time: {point.ShopTimeTrue} days<br>Volume: {point.Quantity}")) %>%
  hc_xAxis(type = "category") %>%
  hc_yAxis(title = "days", labels = list(format = "{value} days")) %>%
  hc_tooltip(crosshairs = TRUE, shared = TRUE, 
             headerFormat = "<b>PN {point.key}</b><br>"
             ) %>%
  hc_plotOptions(column = list(grouping = FALSE, events = list(click = ClickFunctionCustReviewPN)))

1 回答

  • 0

    您是否考虑使用绘图线来说明您的目标以及它与数据的关系,而不是使用分组列的技巧?由于您的目标数据是一致的,因此这可能是一个更易读的指标 . 而且,由于它不是图表中的系列,因此不会干扰您的工具提示 .

    以下是Highcharts堆积柱形图演示的修改,带有示例绘图线:https://jsfiddle.net/brightmatrix/v3e7gouz/

    yAxis: {
        ...
        plotLines: [{ 
            color: 'red', 
            value: 5, // the value on the y-axis were you want the line to appear
            width: 2, 
            zIndex: 1 // set this value to have the line appear above the y-axis gridline but below the column bars
        }],
        ...
    }
    

    enter image description here

    我希望这对你有所帮助 .

相关问题