动态更改条形颜色-高图 [英] change bar colors dynamically - highcharts

问题描述

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

I'm a R programmer trying to parse some JS code though highcharter package.

我正在尝试根据我已经尝试过了:

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使用不同的颜色?

However I can only highlight with the 'blue' color. How can I use a different color for a different column?

谢谢.

推荐答案

在所有列上只能看到蓝色，因为您在系列上设置了这些事件. 为了实现它，您可以创建带有颜色的数组并将其分配给chart.events.load上的常规图表对象.然后在series.point.events.mouseOver和mouseOut中应该能够通过点索引更改颜色.这是示例代码:

You see only the blue color on all columns, because you set those events on series. In order to achieve it, you can create arrays with colors and assign it to general chart object on chart.events.load. Then in series.point.events.mouseOver and mouseOut should be able to change the color by point index. Here is the example code:

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

这篇关于动态更改条形颜色-高图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！