动态更改条形颜色 - highcharts

Posted 2021-04-14

我是一个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使用不同的颜色？

谢谢。

答案

您在所有列上只看到蓝色，因为您在系列上设置了这些事件。为了实现它，您可以使用颜色创建数组并将其分配给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