[英]How can I get a URI from ApexCharts to download in PDF?
我已經實現了 ApexCharts 並希望將其輸出到 PDF 文檔中。
我試圖從chart.dataURI
獲取下載 URI,但失敗並出現錯誤:
chart.dataURI 不是函數
下面是 Apex 條形圖的創建和我對下載 URI 的嘗試,但它沒有獲取:
var options = {
chart: {
height: 450,
type: 'bar',
width: 1000,
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '40%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
colors: ['#008000', '#d4a823', '#f92525'],
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
series: [{
name: 'Good',
data: JSON.stringify(graph_data.good)
}, {
name: 'Okey',
data: JSON.stringify(graph_data.ok)
}, {
name: 'Bad',
data: JSON.stringify(graph_data.bad)
}],
xaxis: {
categories: graph_data.month,
},
yaxis: {
title: {
text: 'Smiley Percentage'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function(val) {
return val + " Smileys"
}
}
}
}
var chart = new ApexCharts(document.querySelector("#monthlyhistory"), options);
var dataURL = chart.dataURI().then((uri) => { // Here shows an error
console.log(uri);
var pdf = new jsPDF();
pdf.addImage(uri, 'PNG', 0, 0);
pdf.save("download.pdf");
})}
我希望以 PDF 格式輸出,但它不起作用。
在調用chart.dataURI()
函數之前,您需要呈現圖表(我在您的問題中找不到)
render
函數返回一個 promise,因此您可以在它的then()
處理程序中鏈接任何其他代碼。
像這樣。
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render().then(() => {
chart.dataURI().then(({ imgURI, blob }) => {
var pdf = new jsPDF();
pdf.addImage(imgURI, 'PNG', 0, 0);
pdf.save("download.pdf");
})
})
這是有效的codepen 演示
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.