我在highchart插件中有气泡图,这里我的要求是每当我点击一个气泡,气泡应该改变它的颜色,我的意思是它应该像我的例子中的active.Here它的工作很好,但我不能改变活动/突出显示的颜色到red.its只显示黑色边框和灰色的color.Can任何人请帮助我在it.Here是我的代码下面。
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
javascript
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'Highcharts bubbles with radial gradient fill'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
series: [{
data: [
[9, 81, 63],
[98, 5, 89],
[51, 50, 73],
[41, 22, 14],
[58, 24, 20],
[78, 37, 34],
[55, 56, 53],
[18, 45, 70],
[42, 44, 28],
[3, 52, 59],
[31, 18, 97],
[79, 91, 63],
[93, 23, 23],
[44, 83, 22]
],
color: 'green',
negativeColor: '#ffffff',
states: {
select: {
color: 'red'
}
},
allowPointSelect: true
}]
});
发布于 2018-07-29 01:39:34
我猜气泡型图表没有select
状态。他们在文档中单独提到了hover
。这些选项也是针对整个系列的,而不是针对单个点的。
https://api.highcharts.com/highcharts/series.bubble.states
因此,您可以通过使用CSS选择器来应用所需的样式来实现相同的效果。您可以以.highcharts-point-select
类为目标并应用样式。
这是一支代码笔,看看吧。https://codepen.io/samuellawrentz/pen/mjqmVZ
您也可以使用Javascript执行此操作,您必须手动更新所选点的颜色。CSS看起来非常简单和直接
https://stackoverflow.com/questions/51570088
复制相似问题