highcharts Highcharter中的条件轴格式

epggiuax  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(155)

我试图在一个闪亮的 Jmeter 板上制作一个highcharterReact图。该图是基于产品销售,可以在不同的货币。为此,我有一个下拉列表来选择货币,并根据所选的货币改变图。我设法使工具提示货币代码依赖于选择,但是我不知道如何将同样的推理应用于轴值。假设我有以下数据:

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

用户将选择一种货币,绘图将只为该货币生成。我希望在工具提示和Y轴上显示货币值。以下是我为包含工具提示的绘图编写的代码:

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”,您可以看到工具提示自动更新:

我希望在y轴上显示相同的动态前缀,以便在选择'GBP'时自动获得此结果,对于'EUR'则相反:

有什么建议吗?

k2fxgqgv

k2fxgqgv1#

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

相关问题