[英]Conditional Axis Formatting in Highcharter
I am trying to produce a highcharter reactive plot in a shiny dashboard.我正在尝试在 shiny 仪表板中生成高容量反应式 plot。 The plot is based on product sales, which can be in different currencies. plot是根据产品销售情况,可以是不同的货币。 To that effect I have a dropdown list to select currencies, and based on the selected currency the plot changes.为此,我有一个 select 货币的下拉列表,并根据所选货币 plot 更改。 I managed to make the tooltip currency code dependent on the selection, but I cannot figure out how to apply the same reasoning to the axis values.我设法使工具提示货币代码依赖于选择,但我无法弄清楚如何将相同的推理应用于轴值。 Suppose I have the following data:假设我有以下数据:
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
The user will select a currency, and the plot will be generated only for that currency.用户将 select 一个货币,并且 plot 将只为该货币生成。 I would like to display the currency value in the tooltip and on the y-axis.我想在工具提示和 y 轴上显示货币值。 This is my code for the plot containing the tooltip:这是包含工具提示的 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)
}"
))
)
If you then change the filter from 'EUR' to 'GBP' you can see that the tooltip updates automatically:如果您随后将过滤器从“EUR”更改为“GBP”,您可以看到工具提示自动更新:
I would like the same dynamic prefix to appear on the y-axis to get this result automatically when 'GBP' is select, and vice-versa for 'EUR':当“GBP”为 select 时,我希望在 y 轴上出现相同的动态前缀以自动获得此结果,反之亦然:
Any suggestions?有什么建议么?
Inside chart.events.load
it's possible to use update method to change suffix.在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 + ' €]'
}
})
}
}
Demo: https://jsfiddle.net/BlackLabel/b0yucdot/1/演示: https://jsfiddle.net/BlackLabel/b0yucdot/1/
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.