javascript Highcharts 选项更改背景颜色

Question

我有 5 天时间尝试更改色区，这是代码：

   [https://jsfiddle.net/gerarca/7sg1c4nz/187/][1]

我只想在结束事件时更改背景颜色，例如：

enter image description here

如果我将鼠标指针放在一个部门上，一个区域应该以红色突出显示，即该部门所属的区域。

我试过多次使用，但是这个属性只能使用一次而且不起作用。

我哪里错了？？

Answer 1

将此添加到您的 css 文件中：

.highcharts-series-group path:hover {
    fill: rgba(249, 209, 12, 0.87); // or whatever color
}

Answer 2

你的例子中的每个部门指的是系列中的一个点。如果你想改变悬停点的colour，你可以使用即point.events来实现：

    point: {
      events: {
        mouseOver: function() {
          originalColor = this.color;

          this.update({
            color: '#5F9EA0'
          });
        },
        mouseOut: function() {
          this.update({
            color: originalColor
          });
        }
      }
    }

但是如果您想更改区域的 colour 并在悬停时启用 dataLabels，如图所示，最好将区域创建为一个单独的系列。然后您将能够在 mouseOver 事件后轻松更新这些系列。

Highcharts.mapChart('container', {
      chart: {
        map: topology
      },

      title: {
        text: ''
      },

      plotOptions: {
        series: {
          dataLabels: {
            enabled: false,
            color: 'white',
            format: '{point.name}'
          },
          color: 'grey',
          allAreas: false,
          states: {
            hover: {
              color: 'red'
            }
          },
          events: {
            mouseOver: function() {
              this.update({
                color: 'red',
                dataLabels: {
                  enabled: true
                }
              }, false)
              chart.update({}, true, false, false);
            },
            mouseOut: function() {
              this.update({
                color: 'grey',
                dataLabels: {
                  enabled: false
                }
              }, false)
              chart.update({}, true, false, false);
            }
          }
        },
      },

      series: [{
          data: zone1,
          name: 'zone 1'
        },
        {
          data: zone2,
          name: 'zone 2'
        },
        {
          data: zone3,
          name: 'zone 3'
        },
        {
          data: zone4,
          name: 'zone 4'
        },
        {
          data: zone5,
          name: 'zone 5'
        }
      ]
    });

演示：

https://jsfiddle.net/BlackLabel/296ujzf4/

API 参考文献：

https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver https://api.highcharts.com/class-reference/Highcharts.Series#update

javascript Highcharts 选项更改背景颜色

javascript Highcharts over option change backgroung color

javascript

jquery

highcharts