Highcharts柱形图的不同条组如何设置不同的光标？

Question

在 Total bars 上，我想要默认光标，但在 tires bars 上，我想要光标：pointer.

有没有办法不使用 css 以编程方式做到这一点？因为可以有100个列组。

Answer 1

你为什么不使用 CSS？

const colors = ['#648DE6', '#BBA8F6', '#19DCEA'];

document.addEventListener('DOMContentLoaded', function() {
  const chart = Highcharts.chart('container', {
    chart: {
      type: 'column',
    },
    plotOptions: {
      column: {
        borderRadius: 8
      }
    },
    colors: colors,
    title: {
      text: 'Car Parts'
    },
    xAxis: {
      categories: ['Total', 'Tires']
    },
    yAxis: {
      title: {
        text: 'Cost'
      }
    },
    series: [{
      name: 'One',
      data: [8, 9],
      color: colors[0]
    }, {
      name: 'Two',
      data: [1, 6],
      color: colors[1]
    }, {
      name: 'Three',
      data: [11, 5],
      color: colors[2]
    }]
  });
});

.highcharts-series-group .highcharts-series .highcharts-point:nth-child(2) {
  cursor: pointer;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/css/highcharts.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/highcharts.min.js"></script>
<div id="container" style="width:100%; height:400px;"></div>