我有一个折线图，我需要将其保存为高质量的PDF。 当按下“下载PDF”按钮时，我在第二个隐藏的画布中创建了一个更大的图表，在动画上，完整的PDF是使用jsPDF生成的。 到目前为止，所有方法都可以正常工作。
假设图表中有更多的线，那么当我单击标签时，相应的线将被隐藏。现在，我想下载带有修改后图表的PDF，但这是问题所在：第二张图表仍然保留了第一张图表的原始数据。 我认为是因为数据是在加载页面时创建的，并且单击当前图表的标签正在图表的“客户端”实例上工作。
有什么方法可以访问当前实例（带有隐藏线）并将该数据发送到第二个图表？
一些图像： picture with two lines, second big canvas OK
picture with line hidden, second big canvas WRONG
我的代码：
<canvas id="canvas" ></canvas>
<script>
var chartData = {"labels":["2019-06-17 22:01:00","2019-06-18 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-19 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-20 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-21 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-22 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-23 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-24 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-25 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-26 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-27 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-28 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-29 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-06-30 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-07-01 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-07-02 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-07-03 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-07-04 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00","22:01:00","2019-07-05 02:01:00","06:01:00","10:01:00","14:01:00","18:01:00"],"datasets":[{"label":"Cella 33","borderColor":"#FF0000","borderWidth":1,"backgroundColor":"transparent","data":["71.09900","71.09900","71.12500","71.12500","71.15000","71.11200","71.11200","71.09900","71.12500","71.11200","71.15000","71.11200","71.08700","71.08700","71.08700","71.11200","71.15000","71.09900","71.08700","71.07500","71.12500","71.12500","71.18700","71.16200","71.15000","71.15000","71.15000","71.18700","71.22400","71.18700","71.17500","71.21200","71.23700","71.25000","71.33700","71.13700","71.11200","71.15000","71.21200","71.27500","71.20000","71.09900","71.06200","71.06200","71.07500","71.08700","71.09900","71.08700","71.05000","71.03700","71.05000","71.06200","71.08700","71.08700","71.05000","71.02500","71.03700","71.05000","71.07500","71.08700","71.03700","71.01200","71.01200","71.01200","71.05000","71.06200","71.02500","70.99900","70.99900","70.99900","71.03700","71.03700","70.99900","70.98700","70.98700","70.97400","71.02500","71.02500","70.98700","70.97400","70.96200","70.96200","70.99900","70.99900","70.96200","70.95000","70.95000","70.93700","70.97400","70.99900","70.96200","70.95000","70.93700","70.95000","70.97400","70.95000","70.96200","70.97400","70.99900","71.01200","71.07500","70.96200","70.95000","70.95000","70.97400","70.98700","71.02500","70.96200"]},{"label":"Cella 34","borderColor":"#008000","borderWidth":1,"backgroundColor":"transparent","data":["68.48700","68.40000","68.36200","68.28700","68.32500","68.50000","68.50000","68.40000","68.32500","68.26200","68.26200","68.47400","68.45000","68.40000","68.40000","68.33700","68.37400","68.56200","68.50000","68.41200","68.34900","68.27500","68.27500","68.37400","68.33700","68.27500","68.23700","68.15000","68.06200","68.20000","68.22500","68.12500","68.11200","68.07500","67.96200","68.33700","68.28700","68.17400","68.07500","67.97400","68.16200","68.58700","68.70000","68.59900","68.52500","68.45000","68.50000","68.93700","68.88700","68.75000","68.65000","68.56200","68.59900","68.98700","68.92500","68.79900","68.68700","68.59900","68.67400","69.05000","68.99900","68.88700","68.75000","68.67400","68.71200","69.01200","68.95000","68.82500","68.73700","68.58700","68.62500","68.98700","68.93700","68.81200","68.70000","68.65000","68.72500","69.01200","68.96200","68.84900","68.76200","68.66200","68.75000","68.90000","68.48700","68.37400","68.32500","68.32500","68.27500","68.47400","68.42500","68.32500","68.29900","68.25000","68.28700","68.15000","68.06200","68.06200","68.06200","68.01200","67.90000","68.31200","68.20000","68.08700","68.05000","67.97400","68.07500","68.46200"]}]};
var myLine1 = new Chart(document.getElementById("canvas").getContext("2d"),{
data: chartData,
type: "line",
options: {
scaleShowValues: true,
scales: {
xAxes: [{
ticks: {
autoSkip: true
}
}]
}
}
});
</script>
<button id="downloadPDF" onClick="downloadPDF()">scarica pdf</button>
<canvas id="canvashq" hidden></canvas>
<script>
function downloadPDF() {
var sizes = {};
sizes['docWidth'] = 297;
sizes['docHeight'] = 210;
sizes['marginLeft'] = 10;
sizes['marginRigth'] = 10;
sizes['marginTop'] = 10;
sizes['marginBottom'] = 10;
sizes['docHeader'] = 12;
sizes['docFooter'] = 8;
sizes['graphWidth'] = sizes['docWidth']-sizes['marginLeft']-sizes['marginRigth'];
sizes['graphHeight'] = sizes['docHeight']-sizes['marginTop']-sizes['marginBottom']-sizes['docHeader']-sizes['docFooter'];
sizes['canvasWidth'] = 3000;
sizes['canvasHeight'] = sizes['canvasWidth']*sizes['graphHeight']/sizes['graphWidth'];
// commented for debug
//document.getElementById("canvashq").style.display = "none";
document.getElementById("canvashq").width = sizes['canvasWidth'];
document.getElementById("canvashq").height = sizes['canvasHeight'];
var chartHQ = new Chart(document.getElementById("canvashq").getContext("2d"),{
data: myLine1.data,
type: "line",
options: {
responsive: false,
maintainAspectRatio: false,
bezierCurve : false,
scaleShowValues: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}],
xAxes: [{
ticks: {
autoSkip: false
}
}]
},
animation: {
onComplete: function(){
var imgChartHQ = chartHQ.toBase64Image();
var doc = new jsPDF('l','mm','a4');
doc.addImage(imgChartHQ,'png',sizes['marginLeft'],sizes['marginTop']+sizes['docHeader'],sizes['graphWidth'],sizes['graphHeight']);
doc.save('sample-file.pdf');
}
}
}
});
}
</script>