如何在悬停Highcharts时将盒子阴影置于Bar(点)?

问题描述 投票:0回答:1

我正在使用Highcharts作为专栏

在一个酒吧的盘旋,想要只为当前悬停的酒吧获得盒子阴影。有人可以帮我这样做吗?我需要为该点设置特定的box-shadow值

目前,它看起来像这个enter image description here

这是我的代码

//柱形图

Highcharts.chart('column-highchart', {
    chart: {
        type: 'column',
        height: 270

    },
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        type: 'category',
        labels:{
            style: {
                color: 'rgba(43, 48, 52, 0.4)',
                fontWeight:'bold',
                fontFamily:'Inter UI'
            }
        }
    },
    yAxis: {
        gridLineWidth: 0,
        min: 20,
        max: 100,
        distance:20,
        tickInterval: 20,
        labels:{
            style: {
                color: 'rgba(43, 48, 52, 0.4)',
                fontWeight:'bold',
                fontFamily:'Inter UI'
            }
        },
        title: {
            text: ''
        }

    },
    legend: {
        enabled: false,

    },
    plotOptions: {
        // column: {
  //       states: {
  //           hover: {
  //           shadow: {
  //           color: 'rgba(0, 0, 0, 0.2)',
  //           offsetX: 1,
  //           offsetY: 10,
  //           opacity: '0.2',
  //           width: 10
     //             },                                                 
  //           }
  //       }
  //   },
  series: {
    borderWidth: 0,
      // pointWidth:120,
      groupPadding: 0,
      pointPadding:0.08,

      dataLabels: {
        enabled: false,
        format: '{point.y:.1f}%'
      },
      point: {
        events: {
            mouseOver: function() {$(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', '#00b5fa');

        },
        mouseOut: function() {                       
            $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', 'rgba(43, 48, 52, 0.4)');
        }
      }
  },
  color: {
    linearGradient: {
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 1
    },
    stops: [
    [0, '#05e06f'],
    [1, '#00b1f5']
    ]
  }
}
},

tooltip: {
    headerFormat: '<span style="font-family:Inter UI;font-size:11px; color:#fff;">{point.y} {series.name}</span><br>',
    pointFormat: '',
    backgroundColor: '#282e35',
    borderColor: '#282e35'
},

"series": [
{
    "name": "Hours",
    "colorByPoint": false,

    "data": [
    {
        "name": "Week 1",
        "y": 62,
          // "drilldown": "week1"
      },
      {
        "name": "Week 2",
        "y": 40,
          // "drilldown": "week2"
      },

      {
        "name": "Week 3",
        "y": 35,
          // "drilldown": "week3"
      },
      {
        "name": "Week 4",
        "y": 84,
          // "drilldown": "week4"
      },
      {
        "name": "Week 5",
        "y": 68,
          // "drilldown": "week5"
      }
      ]
  }
  ]

});});

如果某种灵魂可以帮助我,我会非常感激。

highcharts hover box-shadow
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.