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

【问题标题】：How to Create Custom Shapes in R Highcharter如何在 R Highcharter 中创建自定义形状
【发布时间】：2019-08-05 16:06:49
【问题描述】：

我对 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"
          )
        )
      )

当我将此代码放入图表时，我的图表变为空白，并且没有显示任何内容。感谢您查看此内容。

【问题讨论】：

请添加您使用的数据和包，以便人们重现问题
对不起，迈克，我刚刚更新了帖子。

标签： r highcharts r-highcharter

【解决方案1】：

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

这是关键部分：

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

【讨论】：