在总计栏上,我希望有默认光标,但在轮胎栏上,我希望有光标:指针。有没有办法不用css通过编程来实现呢?因为可能有100个列组。
kb5ga3dv1#
可以为具有特定x值的点设置cursor样式。例如:
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
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。一个三个三个一个
2条答案
按热度按时间kb5ga3dv1#
可以为具有特定
x
值的点设置cursor
样式。例如:实时演示:http://jsfiddle.net/BlackLabel/vw06d5yL/
**API参考:**api.highcharts.com/class-reference/Highcharts.SVGElement#css
q35jwt9p2#
为什么不使用CSS?
如果您想使其动态化,可以使用JavaScript。
一个三个三个一个