Highcharter中的条件轴格式

Question

我正在尝试在 shiny 仪表板中生成高容量反应式 plot。 plot是根据产品销售情况，可以是不同的货币。 为此，我有一个 select 货币的下拉列表，并根据所选货币 plot 更改。 我设法使工具提示货币代码依赖于选择，但我无法弄清楚如何将相同的推理应用于轴值。 假设我有以下数据：

df = tibble(id = c(1:10),
       item = c(sample(c('item1','item2','item3'), 10, replace = TRUE)),
       sales = c(sample(c(500:1500), 10, replace = TRUE)),
       units = c(sample(c(1:10), 10, replace = TRUE)),
       currency = c(sample(c('GBP','EUR'), 10, replace = TRUE))
       )


df = df %>% 
  group_by(item) %>% 
  summarise(total_sales = sum(sales),
            total_units = sum(units),
            currency = currency) %>% 
  ungroup()


# A tibble: 5 × 4
  item  currency total_sales total_units
  <chr> <chr>          <int>       <int>
1 item1 EUR             1044           9
2 item1 GBP             5082          25
3 item2 EUR             1071           8
4 item2 GBP             1096           1
5 item3 EUR             2628          25

用户将 select 一个货币，并且 plot 将只为该货币生成。 我想在工具提示和 y 轴上显示货币值。 这是包含工具提示的 plot 的代码：

df %>% 
  filter(currency == 'EUR') %>% 
  mutate(colors = colorize(total_units, scales::viridis_pal(option = "viridis",
                                                           begin = 0,
                                                           direction = 1)(length(unique(total_units))))) %>%
  hchart('column', hcaes(x = item, y = total_sales,
                         color = colors)) %>% 
  hc_colorAxis(
    min=min(df$total_units),
    max=max(df$total_units ),
    stops= color_stops(colors = cols), 
    marker = NULL
  ) %>% 
  hc_tooltip(
    useHTML = TRUE,                             
    formatter = JS(
      "
      function(){
        outHTML = '<b> Product: </b>' + this.point.item + '<b><br> Sales:</b> '+ this.point.currency + ' ' + this.point.total_sales +
        '<b><br> Number of Units Sold: </b>' + this.point.total_units
        return(outHTML)
      }

      "
    ),
    shape = "square", # Options are square, circle and callout
    borderWidth = 0  # No border on the tooltip shape
  ) %>% 
  hc_yAxis(title = list(text = "Sales Amount",
                        align = "middle",
                        margin = 10,
                        style = list(
                          fontWeight = "bold",
                          fontSize = "1.4em"
                        )
  ),
  labels = list(formatter = JS(
    "function(){
             data = this.value
             return(data)
             }"
  ))
  )

如果您随后将过滤器从“EUR”更改为“GBP”，您可以看到工具提示自动更新：

当“GBP”为 select 时，我希望在 y 轴上出现相同的动态前缀以自动获得此结果，反之亦然：

有什么建议么？

Answer 1

在chart.events.load中可以使用update方法来改变后缀。

events: {
  load: function() {
    var chart = this,
      yAxis = chart.yAxis[0],
      lastTick = yAxis.tickPositions[yAxis.tickPositions.length - 1],
      suffix = yAxis.ticks[lastTick].label.textStr.substr(-1, 1);

    yAxis.update({
      title: {
        text: 'Revenue [' + suffix + ' €]'
      }
    })
  }
}

演示： https://jsfiddle.net/BlackLabel/b0yucdot/1/

API: https://api.highcharts.com/class-reference/Highcharts.Axis#update