reactjs 如何在Highcharts中的柱形图的不同条形组上有不同的光标?

gupuwyp2  于 2023-03-17  发布在  React
关注(0)|答案(2)|浏览(122)

在总计栏上,我希望有默认光标,但在轮胎栏上,我希望有光标:指针。
有没有办法不用css通过编程来实现呢?因为可能有100个列组。

kb5ga3dv

kb5ga3dv1#

可以为具有特定x值的点设置cursor样式。例如:

chart.series.forEach(s => {
  s.points.forEach(point => {
    if (point.x === 1) {
      point.graphic.css({
        cursor: 'pointer'
      });
    }
  });
});

实时演示:http://jsfiddle.net/BlackLabel/vw06d5yL/
**API参考:**api.highcharts.com/class-reference/Highcharts.SVGElement#css

q35jwt9p

q35jwt9p2#

为什么不使用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>

如果您想使其动态化,可以使用JavaScript。
一个三个三个一个

相关问题