如何实现点击ApexCharts Donut Chart(环形图)时移除对应扇区
ApexCharts 环形图点击删除指定数据项实现方案
- 首先关闭默认的点击扇区展开交互,避免和自定义逻辑冲突
- 将series和labels数据源定义为可修改的变量,方便后续更新
- 重写数据点选择事件回调,删除对应下标数据后调用官方更新方法刷新图表
完整修改后代码如下:
// 先把数据源存为可修改的变量 let currentSeries = data['people']; let currentLabels = datos['name_people']; var options = { chart: { type: 'donut', width: '100%', height: 400, events: { dataPointSelection: function(event, chartContext, config) { // 获取点击的扇区对应的下标 const targetIndex = config.dataPointIndex; // 可选:防止删到只剩0个数据报错 if (currentSeries.length <= 1) return; // 删除对应下标的数据和标签 currentSeries.splice(targetIndex, 1); currentLabels.splice(targetIndex, 1); // 更新图表,ApexCharts会自动重新计算占比并渲染 chart.updateOptions({ series: currentSeries, labels: currentLabels }) } } }, // 新增配置,关闭默认点击展开效果 plotOptions: { pie: { expandOnClick: false } }, title: { text: 'Distribution of people', align: 'center', style: { fontSize: '20px', } }, series: currentSeries, labels: currentLabels, dataLabels: { enabled: true, enabledOnSeries: undefined, textAnchor: 'middle', distributed: false, offsetX: 0, offsetY: 0, style: { fontSize: '20px', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 'bold', colors: undefined }, background: { enabled: true, foreColor: '#fff', padding: 4, borderRadius: 2, borderWidth: 1, borderColor: '#fff', opacity: 0.9, dropShadow: { enabled: false, top: 1, left: 1, blur: 1, color: '#000', opacity: 0.45 } }, dropShadow: { enabled: false, top: 1, left: 1, blur: 1, color: '#000', opacity: 0.45 } } }; var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render();
内容的提问来源于stack exchange,提问作者knownothingjonsnow
相关产品推荐
相关产品推荐

