Apex Charts 甜甜圈图 - 图中系列项目之间的填充

Question

我正在尝试在类似于下图（右）的顶点图表中创建圆环图，我已经非常接近了，但是我需要沿着如图所示的圆环图。

当前配置

 const options = {
    chart: {
      type: 'donut',
      height: 150,
      width: '100%',
      offsetX: 50
    },
    plotOptions: {
      pie: {
        startAngle: 10,
        donut: {
          size: '90%',
          dataLabels: {
            enabled: false
          },
          labels: {
            show: true,
            name: {
              show: true,
              offsetY: 38,
              formatter: () => 'Completed'
            },
            value: {
              show: true,
              fontSize: '48px',
              fontFamily: 'Open Sans',
              fontWeight: 500,
              color: '#ffffff',
              offsetY: -10
            },
            total: {
              show: true,
              showAlways: true,
              color: '#BCC1C8',
              fontFamily: 'Open Sans',
              fontWeight: 600,
              formatter: (w) => {
                const total = w.globals.seriesTotals.reduce(
                  (a, b) => a + b,
                  0
                );
                return `${total}%`;
              }
            }
          }
        }
      },
    },
    dataLabels: {
      enabled: false
    },
    labels: ['Completed', 'Cancelled', 'Pending', 'Failed'],
    legend: {
      show: false,
      position: 'right',
      offsetX: -30,
      offsetY: 70,
      formatter: (value, opts) => {
        return value + ' - ' + opts.w.globals.series[opts.seriesIndex];
      },
      markers: {
        onClick: undefined,
        offsetX: 0,
        offsetY: 25
      }
    },
    fill: {
      type: 'solid',
      colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
    },
    stroke: {
      width: 0
    },
    colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
  };

Answer 1

尝试将描边宽度设置为大于 0 并赋予描边与背景相同的颜色。

stroke: {
  width: 4,
  colors: ['#1E252A']
}

Apex Charts 甜甜圈图 - 图中系列项目之间的填充

Apex Charts donut chart - padding between series items in plot

javascript

charts

apexcharts