Highcharter 中的超链接条形图

Posted

技术标签:

【中文标题】Highcharter 中的超链接条形图【英文标题】:Hyperlink bar chart in Highcharter 【发布时间】:2018-06-28 23:40:22 【问题描述】:

我无法使用 Highcharter 在 R 中重新创建 this answer 以将条形图中的条形图转换为可点击的 URL。 Here is the javascript code 来自答案。 Highcharter 有一个 vignette 关于重新创建我试图遵循的 Javascript。这是迄今为止尝试过的。它不显示任何条形。

library(tidyverse)
library(highcharter)

highchart() %>%
  hc_chart(type = "column") %>%
  hc_title(text = "Click points to go to URL") %>%
  hc_xAxis(type = "category") %>%
  hc_plotOptions(series = list(cursor = "pointer"),
                 point =
                   list(events = list(
                     click = JS(
                       "function () 
                       location.href = 'https://en.wikipedia.org/wiki/' +
                       this.options.key;
                       "
                     )
                     ))) %>%
  hc_series(
    list(name = "USA", key = "United_States", y = 29.9),
    list(name = "Canada", key = "Canada", y = 71.5),
    list(name = "Mexico", key = "Mexico", y = 106.4)
  )

【问题讨论】:

【参考方案1】:

安德鲁,

复制示例时出现一些 (2) 错误:

    如果你仔细检查你给出的例子。 point 参数与 cursorseries 参数中的深度相同。 您没有以正确的方式添加数据(如小插曲)。

您的代码的固定版本是:

highchart() %>%
  hc_chart(type = "column") %>%
  hc_title(text = "Click points to go to URL") %>%
  hc_xAxis(type = "category") %>%
  hc_plotOptions(
    series = list(
      cursor = "pointer",
      point = list(
        events = list(
          click = JS( "function ()  location.href = 'https://en.wikipedia.org/wiki/' + this.options.key; ")
          )
        )
      )
    ) %>%
  hc_series(
    list(
      data = list(
        list(name = "USA", key = "United_States", y = 29.9),
        list(name = "Canada", key = "Canada", y = 71.5),
        list(name = "Mexico", key = "Mexico", y = 106.4)
        )
      )
  )

添加数据的更好版本是:

dat <- data.frame(
  country = c("USA", "Canada", "Mexico"),
  url = c("United_States", "Canada", "Mexico"),
  value = c(29.9, 71.5, 106.4)
)

highchart() %>%
  hc_xAxis(type = "category") %>%
  hc_plotOptions(
    series = list(
      cursor = "pointer",
      point = list(
        events = list(
          click = JS( "function ()  location.href = 'https://en.wikipedia.org/wiki/' + this.options.key; ")
          )
        )
      )
    ) %>%
  hc_add_series(data = dat, type = "column", mapping = hcaes(name = country, key = url, y = value))

希望对你有所帮助

【讨论】:

非常感谢! Highcharter 是一个很棒的包!

以上是关于Highcharter 中的超链接条形图的主要内容,如果未能解决你的问题,请参考以下文章

Highcharter - 单击事件以过滤图表中的数据

如何使用 Python 中的 Plotly Express 为每个条形图添加可点击链接?

动态更改条形颜色 - highcharts

jsp中如何给背景图上的超链接添加点击事件?

R Highcharter Sankey节点列属性问题

Matplotlib条形图仅在非零条形图处显示x-ticks