динамическое изменение цвета бара - высокие графики

Question

Я R программист, пытающийся проанализировать некоторый код JS через highcharter пакет.

Я пытаюсь изменить цвет каждого бара при наведении курсора на этот пример на основе этого вопроса.

Я пробовал это:

plotOptions: {
  column: {
    events: {
      mouseOver: function () {

        this.chart.series[this.index].update({
          color: 'blue'
        });
      },
      mouseOut: function () {

        this.chart.series[this.index].update({
          color: '#b0b0b0'
        });                           
      }
    };
    states: {
      hover: {

        color: colors[x]                                                           
      }
    }

  }
}

Однако я могу выделить только синим цветом. Как я могу использовать другой цвет для другого column?

Спасибо.

Answer 1

Вы видите только синий цвет во всех столбцах, потому что вы устанавливаете эти события в сериях. Чтобы достичь этого, вы можете создать массивы с цветами и назначить их общему объекту диаграммы на chart.events.load. Тогда в series.point.events.mouseOver и mouseOut должна быть возможность менять цвет по индексу. Вот пример кода:

highchart() %>% 
  hc_chart(events = list(
    load = JS("function() {this.customColors = ['red', 'green', 'blue']}")
  )) %>% 
  hc_series(
    list(
      data =  abs(rnorm(3)) + 1,
      type = "column",
      color = '#ddd',
      point = list(
        events = list(
          mouseOver = JS("function() {this.update({color: this.series.chart.customColors[this.index]})}"),
          mouseOut = JS("function() {this.update({color: '#ddd'})}")
        )
      )
    )
  )

Справочник по API:

https://api.highcharts.com/highcharts/series.column.point.events

https://api.highcharts.com/highcharts/chart.events.load