我使用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"
/>
型
1条答案
按热度按时间monwx1rj1#
有两件事需要考虑:
1.图表ID不应以数字开头。
1.我解决了我的问题,通过设置一个固定的id,而不是动态更改它,因为一些未知的原因配置chart.id对我不起作用(也许是因为更改图形id导致重新渲染):
字符串
在那之后,下面工作得很好。
型