时间戳

首页 > 解决方案 > 动态更改条形颜色 - highcharts

highcharts - 动态更改条形颜色 - highcharts

问题描述

我是一名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？

谢谢你。

标签： highchartshover

解决方案

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

推荐阅读