javascript 如何导出ApexCharts图形到PDF时使用挂钩?

f45qwnt8  于 2023-08-02  发布在  Java
关注(0)|答案(1)|浏览(109)

我使用ApexCharts来呈现用户选择的图形。我正在使用React钩子。我想有一个按钮,将生成一个PDF文件从当前(或多个)图。我已经检查了jsPDF,有一个如何做到这一点的例子,但我无法访问我当前的渲染图,以创建PDF文档。如何访问当前图形以创建PDF文档,同时使用钩子并动态呈现图形?
下面是我的代码:

const defaultChartOptions = {
    chart: {
      id: '',
      animations: {
        enabled: false,
      },
      toolbar: {
        export: {
          csv: {
            filename: '',
          },
          svg: {
            filename: '',
          },
          png: {
            filename: '',
          },
        },
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },
    title: {
      text: '',
      align: 'center',
    },
    xaxis: {
      type: 'datetime',
      categories: [],
    },
    yaxis: {
      labels: {
        formatter: (val) => formatLabels(val),
      },
    },
    noData: {
      text: 'No data selected...',
    },
    markers: {
      size: 0,
    },
    tooltip: {
      x: {
        format: 'dd/MM/yy HH:mm',
      },
    },
    series: [],
  };

  const [options, setOptions] = useState(defaultChartOptions);

  useEffect(() => {
    if (storeId) {
      const exportFileName = `${
        data.number
      }_store_${storeId}_${job.replaceAll(' ', '_')}`;
      setOptions({
        chart: {
          ...options.chart,
          id: exportFileName,
          toolbar: {
            export: {
              csv: {
                filename: exportFileName,
              },
              svg: {
                filename: exportFileName,
              },
              png: {
                filename: exportFileName,
              },
            },
          },
        },
        series: storeData[storeId].graphData.series,
        xaxis: {
          ...options.xaxis,
          categories: storeData[storeId].graphData.options.xaxis.categories,
        },
        title: {
          ...options.title,
          text: exportFileName,
        },
      });
    }
  }, [storeId]);

字符串
图形和按钮:

<Button
                label="Export to PDF"
                size="small"
                secondary
                onClick={() => {

                // How to get the chart by ID here in order to create the PDF doc ? 
                      console.log(window); // OK
                      console.log(options.chart.id); // OK
                      console.log(window.ApexCharts.getChartByID(options.chart.id)); // <-- returns undefined
                      console.log(window.Apex._chartInstances); // <-- returns empty []
                      // const dataURL = chart.dataURI().then(({ imgURI, blob }) => {
                      //   const { jsPDF } = window.jspdf;
                      //   const pdf = new jsPDF();
                      //   pdf.addImage(imgURI, 'PNG', 0, 0);
                      //   pdf.save('pdf-chart.pdf');
                      // });
                      // console.log(dataURL);
                    }}
                  />
    
             <Chart
              options={options}
              series={options.series}
              height="500px"
              width="99%"
              type="area"
            />

monwx1rj

monwx1rj1#

有两件事需要考虑:
1.图表ID不应以数字开头。
1.我解决了我的问题,通过设置一个固定的id,而不是动态更改它,因为一些未知的原因配置chart.id对我不起作用(也许是因为更改图形id导致重新渲染):

chart: {
      id: 'chart',
      ...

字符串
在那之后,下面工作得很好。

const chart = window.ApexCharts.getChartByID(
                    options.chart.id
                  );

相关问题