需要在Highchart react中为图例项设置一个清除所有按钮

Question

我在React中有一个打包的气泡图，需要有一个可以取消选择所有legendItems的clear all按钮。因此，我可以在描述旁边有一个按钮来清除所有选定的图例项目，并有一个空白图表，单击单个项目时，我只能看到图表中的气泡。

我试着在下面的代码中创建一个事件，但它不起作用。

options = {
overflow: 'allow',
chart: {
type: 'packedbubble',
height: '100%'
},
title: {
text: ''
},
subTitle: {
text: 'Some text'
},
tooltip: {
useHTML: true,
pointFormat: '</sub>'
},
legend: {
title: {
text: 'Classification<br/><span style="font-size: 9px; color: #666; font-weight: normal; font-style: italic;">(Click to pop)</span>'
}
},
plotOptions: {
packedbubble: {
dataLabels: {
enabled: true,
format: '{point.code}',
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal'
}
},
layoutAlgorithm: {
splitSeries: false,
},
minSize: 25,
maxSize: 200,
},
bubble: {
events: {
checkboxClick: function (event) {
var text = 'The checkbox is now ' + event.checked;
if (!this.chart.lbl) {
this.chart.lbl = this.chart.renderer.label(text, 100, 70)
.attr({
padding: 10,
r: 5,
fill: Highcharts.getOptions().colors[1],
zIndex: 5
})
.css({
color: '#FFFFFF'
})
.add();
} else {
this.chart.lbl.attr({
text: text
});
}
}
},
showCheckbox: true}
},
series: []
}
class ClassName extends Component {
componentDidMount(){
FunctionName(this.props)
}
render(){
const { FieldName: { result }, dataLoading, dataLoaded } = this.props
if (dataLoading || !dataLoaded) {
return <FullPageLoadingIcon />
}
const dataOptions = options
dataOptions.series = result
return (
<Container>
<HighchartsReact
highcharts={Highcharts}
options={dataOptions}
/>
</Container>
)
}
}

Answer 1

您可以添加一个按钮元素，并在单击时为所有系列调用hide方法。

document.getElementById('clearAll').addEventListener('click', function() {
chart.series.forEach(s => {
if (s.visible) {
s.hide();
}
});
});

---

现场演示：https://jsfiddle.net/BlackLabel/t7onpkgs/

API参考：https://api.highcharts.com/class-reference/Highcharts.Series#hide