如何基于y位置动态更改标记点的颜色 [英] How to change the color of marker-points dynamically based on y-position

问题描述

我在下面的交互式情节中使用R

I have below interactive plot using highchart js library in R

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))

我想根据基于y-value动态的线条颜色来匹配markers的颜色.当前所有标记的颜色设置为我不想要的black.

I wanted to match the color of markers based on the line color which is dynamic based on the y-value. Currently color of all markers as set as black which I did not want.

任何指针如何动态更改颜色将非常有帮助

Any pointer how to change the color dynamically will be highly helpful

推荐答案

API中没有此类选项.您需要编写一些自定义代码. 最简单的方法是使用chart.events.load事件，遍历系列中的所有点，在红色或绿色区域中找到它们，并分别更新其标记选项. 要在R中编写JavaScript代码，可以使用JS(")函数.

The is no such option in the API. You need to write some custom code. The simplest way is to use chart.events.load event, loop through all points of your series, find the ones in the red or green zone and update their marker options separately. To write a JavaScript code in R, you can use JS("") function.

这是整个示例代码:

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();
  }")))

API参考: https://api.highcharts.com/highcharts/chart. events.load https://api.highcharts.com/class-reference/Highcharts.Chart#更新 https://api.highcharts.com/class-reference/Highcharts.Point#更新

这篇关于如何基于y位置动态更改标记点的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！