Javascript 如何基于y位置动态更改标记点的颜色

我在

R

中使用

highchart

js

库绘制了下面的交互式绘图

library(highcharter)
hchart(data.frame('Date' = seq(Sys.Date(), Sys.Date() - 10, by = '-1 day'), 'Value' = sample(c(-1, 1), 11, replace = T), 'variable' = 'aa') %>% mutate(color = ifelse(Value < 0, "#41c83b", "#E0245E")), 
                            "line", 
                            zIndex = 1, opacity = 0.9,
                            hcaes(x = Date, y = Value, group = variable),
                            zones = list(list(value = 0, color = hex_to_rgba("#41c83b", 1)), list(color = hex_to_rgba("#E0245E", 1))),
                            marker = list(fillColor = "#fff", lineColor = '#000', radius = 5, lineWidth = 2))

库（highcharter）
hchart（data.frame（'Date'=seq（Sys.Date（），Sys.Date（）-10，by='-1天'），'Value'=sample（c（-1，1），11，replace=T），'variable'='aa'）%>%mutate（color=ifelse（Value<0，“#41c83b”，“#E0245E”），
“行”，
zIndex=1，不透明度=0.9，
hcaes（x=日期，y=值，组=变量），
区域=列表（列表（值=0，颜色=十六进制到rgba（“#41c83b”，1）），列表（颜色=十六进制到rgba（“#E0245E”，1）），
marker=list（fillColor=“#fff”，lineColor=”#000'，radius=5，lineWidth=2））

我想根据线条颜色匹配

标记的颜色，线条颜色是基于
y值动态的。当前所有标记的颜色设置为
黑色
，这是我不想要的

任何如何动态更改颜色的指针都将非常有用
API中没有这样的选项。您需要编写一些自定义代码。
最简单的方法是使用chart.events.load事件，循环遍历序列中的所有点，找到红色或绿色区域中的点，并分别更新它们的标记选项。
要在R中编写JavaScript代码，可以使用JS（“”）函数

以下是整个示例代码：

library(highcharter)
hchart(data.frame('Date' = seq(Sys.Date(), Sys.Date() - 10, by = '-1 day'), 'Value' = sample(c(-1, 1), 11, replace = T), 'variable' = 'aa') %>%
         mutate(color = ifelse(Value < 0, "#41c83b", "#E0245E")), 
       "line", 
       zIndex = 1, opacity = 0.9,
       hcaes(x = Date, y = Value, group = variable),
       zones = list(list(value = 0, color = hex_to_rgba("#41c83b", 1)), list(color = hex_to_rgba("#E0245E", 1))),
       marker = list(fillColor = "#fff", radius = 5, lineWidth = 2)) %>%
  hc_chart(events = list(load = JS("function () {
    this.series[0].points.forEach(function (point) {
      if (point.y > 0) {
        point.update({
          marker: {
            lineColor: 'red'
          }
        }, false);
      } else {
        point.update({
          marker: {
            lineColor: 'green'
          }
        }, false);
      }
    });
    this.redraw();
  }")))

库（highcharter）
hchart（data.frame（'Date'=seq（Sys.Date（），Sys.Date（）-10，by='-1天'），'Value'=sample（c（-1，1），11，replace=T），'variable'='aa'）%>%
变异（颜色=ifelse（值<0，“#41c83b”，“#E0245E”），
“行”，
zIndex=1，不透明度=0.9，
hcaes（x=日期，y=值，组=变量），
区域=列表（列表（值=0，颜色=十六进制到rgba（“#41c83b”，1）），列表（颜色=十六进制到rgba（“#E0245E”，1）），
标记=列表（fillColor=“#fff”，半径=5，线宽=2））%>%
hc_图表（事件=列表（加载=函数（）{
this.series[0].points.forEach（函数（点）{
如果（点y>0）{
point.update({
标记：{
线条颜色：“红色”
}
}，假）；
}否则{
point.update({
标记：{
线条颜色：“绿色”
}
}，假）；
}
});
这个；
}")))

API参考：