Как динамически изменять цвет точек маркера в зависимости от положения y - PullRequest
Новая
       26

Как динамически изменять цвет точек маркера в зависимости от положения y

0 голосов
/ 29 мая 2020

У меня ниже интерактивный график с использованием библиотеки highchart js в 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))

Я хотел сопоставить цвет markers на основе цвета линии, который является динамическим c на основе y-value. В настоящее время цвет всех маркеров установлен как black, который мне не нужен.

Любой указатель на динамическое изменение цвета будет очень полезен

1 Ответ

1 голос
/ 01 июня 2020

В API такой опции нет. Вам нужно написать собственный код. Самый простой способ - использовать событие chart.events.load, l oop для всех точек вашей серии, найти те, которые находятся в красной или зеленой зоне, и отдельно обновить их параметры маркеров. Чтобы написать код JavaScript в R, вы можете использовать функцию 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();
  }")))

Ссылка на API: https://api.highcharts.com/highcharts/chart.events.load https://api.highcharts.com/class-reference/Highcharts.Chart#update https://api.highcharts.com/class-reference/Highcharts.Point#update

...