You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现点击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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.01 16:18:03