如何在 R Highcharter 中创建自定义形状

Question

我对 R 中的 highcharts 还很陌生，我正在尝试创建一个与此示例类似的子弹图：http://jsfiddle.net/jlbriggs/LdHYt/。我运行遇到的问题是在 R:

中创建这个函数

Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};

而且我不确定将其添加到代码中的何处。

我试过将此代码包含在 hc_plotOptions 符号部分，但我没有成功。

这是我试过的代码：

    library(dplyr)
    library(highcharter)

    actual <- c(5,10,3,15)
    target <- c(6,7,5,12)
    date <- as.Date(c('2012-02-01','2012-03-01','2012-04-01','2012-05-01'))
    data <- data.frame(actual,target,date)

    highchart(type = "stock") %>% 
      hc_add_series_list(
        data %>% 
          group_by(
            name = "actual",
            type = "column",
            yAxis = 0
          ) %>% 
          do( data = list_parse(data.frame(x = datetime_to_timestamp(.$date), y = .$actual)))
      ) %>% 
      hc_add_series_list(
        data %>% 
          group_by(
            name = "target",
            type = "scatter",
            yAxis = 0
          ) %>% 
          do( data = list_parse(data.frame(x = datetime_to_timestamp(.$date), y = .$target)))
      ) %>% 
      hc_plotOptions(
        scatter = list(
          marker = list(
            # This is where I am inserting the Java Script code from the example
            symbol = JS("function(x, y, width, height) {
                  return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
                  };"),
            # 
            lineWidth = 3,
            radius = 8,
            lineColor = "#000"
          )
        )
      )

当我将这段代码放入我的图表时，我的图表变成了空白，并且没有任何显示。谢谢你看这个。

Answer 1

R 环境不允许简单地包装 Highcharts 核心函数（至少我不知道完美的方法）。我这样做的方式：我使用 chart.events.load 事件来注入 JS 代码（你不能像你那样在 plotOptions 标记符号中这样做）。问题是 加载事件 在创建图表后触发。所以我们需要做的就是在创建图表后再次更新我们的标记，以便再次呈现它们，但这次使用更改的核心代码。

这是关键部分：

hc_chart(
    events = list(
      load = JS("function(){
                Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
                  return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
                };
                this.series[1].update({marker: {symbol: 'line'}})
      }")
    )
  ) %>%

以及整个代码：

library(dplyr)
library(highcharter)

actual <- c(5,10,3,15)
target <- c(6,7,5,12)
date <- as.Date(c('2012-02-01','2012-03-01','2012-04-01','2012-05-01'))
data <- data.frame(actual,target,date)

highchart(type = "stock") %>% 
  hc_add_series_list(
    data %>% 
      group_by(
        name = "actual",
        type = "column",
        yAxis = 0
      ) %>% 
      do( data = list_parse(data.frame(x = datetime_to_timestamp(.$date), y = .$actual)))
  ) %>% 
  hc_add_series_list(
    data %>% 
      group_by(
        name = "target",
        type = "scatter",
        yAxis = 0
      ) %>% 
      do( data = list_parse(data.frame(x = datetime_to_timestamp(.$date), y = .$target)))
  ) %>% 
  hc_chart(
    events = list(
      load = JS("function(){
                Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
                  return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
                };
                this.series[1].update({marker: {symbol: 'line'}})
      }")
    )
  ) %>% 
  hc_plotOptions(
    scatter = list(
      marker = list(
        # This is where I am inserting the Java Script code from the example
        symbol = 'line',
        # 
        lineWidth = 3,
        radius = 8,
        lineColor = "#000"
      )
    )
  )

API参考：https://api.highcharts.com/highcharts/chart.events.load https://api.highcharts.com/class-reference/Highcharts.Chart#update

如何在 R Highcharter 中创建自定义形状

How to Create Custom Shapes in R Highcharter

r

highcharts

r-highcharter