使用ApexCharts生成PDF用图表文件时出错，寻求解决方案

我在尝试生成用于PDF的图表文件时遇到错误，每次调用获取base64的方法都会抛出画布已被占用的错误，错误提示为：

Uncaught (in promise) Error: Canvas is already in use. Chart with ID 'donutChart' must be destroyed first.

环形图配置代码 #

const donutOptions: ApexOptions = {
    labels: names,
    dataLabels: {
      enabled: false,
    },
    chart: {
      type: 'donut',
      id: 'donutChart',
      width: '350px',
      height: 160,
      events: {
        dataPointSelection: (chart, options, value) => {
          const selected = {
            percentage: value.w.config.series[value.selectedDataPoints[0]],
            name: value.w.config.labels[value.selectedDataPoints[0]],
          };
          setValue(selected as SelectedValuesType);
        },
        dataPointMouseEnter: (event, cc, value) => {
          const percentage = value.w.config.series[value.dataPointIndex] as number;
          const name = value.w.config.labels[value.dataPointIndex];
          setCurrentHover({ percentage, name });
        },
        dataPointMouseLeave: () => {
          setCurrentHover({} as { percentage: number; name: string });
        },
      },
    },
    responsive: [
      {
        breakpoint: 500,
        options: {
          chart: {
            width: '300px',
            height: 160,
          },
        },
      },
    ],
    plotOptions: {
      pie: {
        expandOnClick: false,
        donut: {
          size: '70%',
        },
      },
    },
    colors: colors as string[],
    states: {
      active: {
        allowMultipleDataPointsSelection: true,
        filter: {
          type: 'darken',
          value: 0.35,
        },
      },
    },
    tooltip: {
      enabled: false,
      theme: 'dark',
      style: {
        fontSize: '12px',
        fontFamily: 'Poppins, sans-serif',
      },
      y: {
        formatter: (value) => `<span class="text-black">${value.toFixed(1)}%</span`,
      },
    },
    legend: {
      show: false,
    },
  };

初始获取base64的getURI函数 #

const getURI = async () => {
    await ApexCharts.exec('donutChart', 'render', []);
    ApexCharts.exec('donutChart', 'dataURI', []).then((res: any) => console.log(res));
  };

尝试修改后的getURI函数 #

const getURI = async () => {
    await ApexCharts.exec('donutChart', 'render', donutOptions);
    ApexCharts.exec('donutChart', 'dataURI', donutOptions).then((res: any) => console.log(res));
  };

已尝试的排查操作 #

• 将图表的width和height分别设置为字符串或数值类型
• 将配置对象作为第三个参数传入ApexCharts.exec方法

内容的提问来源于stack exchange，提问作者Werthis