Question

我是一个R程序员，试图通过JS包解析一些highcharter代码。

我正在尝试使用基于this问题的this示例来更改悬停时的每个条形颜色。

我已经尝试过了：

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

动态更改条形颜色-高图

1 个答案: