這是我在 bootstrap 和 chartjs 框架內構建的 Chartjs 畫布。問題是我無法在移動設備等小螢屏上下載全寬影像。
---- Bootstrap 是必須的
--- 注意：如果您在示例中使螢屏寬度變小，然后單擊下載，則輸出將是該尺寸且很小。
HTML：
<div class="card">
<div class="card-body">
<h4 class="card-title mb-0"> Average </h4>
<a data-name="avg-chart" id="downloadavg" download="searchtrends-average-position-chart.jpg" href="" class="download">
<button class="btn btn-primary" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class=" bi bi-cloud-arrow-down-fill" viewBox="0 0 16 16">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 6.854-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708z" />
</svg>
</button>
</a>
<div class="c-chart-wrapper" id="avg-chart_parent">
<canvas class="chart" id="avg-chart" style="height:300px;width:100%" height="300"></canvas>
</div>
</div>
</div>
JS：
new Chart(document.getElementById("avg-chart"),{"type":"line",
"data":{"labels":["2020.11.1","2020.11.2","2020.11.3","2020.11.4","2020.11.5","2020.11.6","2020.11.7","2020.11.7","2020.11.9","2020.11.10","2020.11.11","2020.11.12","2020.11.13","2020.11.14","2020.11.15","2020.11.16","2020.11.17","2020.11.18","2020.11.19","2020.11.20","2020.11.21","2020.11.22","2020.11.23","2020.11.24","2020.11.25","2020.11.26","2020.11.27","2020.11.28","2020.11.29","2020.11.30",],
"datasets":[{"label":"Average Position ",
"data":["11","12","13","14","15","16","17","18","19","19","19","19","19","19","19","19","19","19","19","20","21","22","23","24","25","26","27","28","29","30",],
"fill":false,"borderColor":"rgb(37,154,71)","lineTension":0.1}]}, options: {
scales: {
yAxes: [{
ticks: {
reverse: true,
}
}],
xAxes: [{
type: 'time',
distribution: 'series',
time: {
tooltipFormat:'MM/DD/YYYY',
}
}]
},
legend: {
display: false,
maxWidth: 9999
}
}});
function downloadpng(chartname,chartid){
var canvas = document.getElementById(chartname);
var url_base64jp =canvas.toDataURL("image/jpg");
var a = document.getElementById(chartid);
a.href = url_base64jp;
}
//Download Chart Image
$('.download').on( 'click', function (event) {
var chartname = $(this).attr('data-name');
var chartid = $(this).attr('id');
downloadpng(chartname,chartid);
});
我在這里做了一個例子：
http://jsfiddle.net/aneeshtan/vu27aew3/49/
如您所見，我無法在小螢屏中保存全尺寸畫布（Chartjs）并自動更改比例。
我怎樣才能下載全尺寸的 chartjs 畫布。
uj5u.com熱心網友回復：
為了獲得更高解析度的圖表快照，您首先需要調整它的大小，然后等待它重新繪制。
最簡單的方法是調整父級的大小并等待 ~ 300ms。
注意：如果您的圖表更復雜（要繪制的資料明顯更多），調整大小和重繪可能需要更長的時間，請隨時相應地增加超時間隔 -321ms現在是。
因為需要等待圖表調整大小，所以不能再使用初始點擊。您需要在圖表調整大小后觸發另一個。
最后，我將href在下載后洗掉該值。如果我不這樣做，隨后單擊該按鈕將回傳第一個快照，并且如果圖表是動態的并且您希望能夠再次對其進行快照而無需重繪 頁面。
代碼如下所示：
function downloadImage(name, id) {
setTimeout(() => {
const a = $(id)[0];
a.href = $(name)[0].toDataURL("image/jpg");
a.click();
}, 321)
}
$('.download').on('click', function(e) {
const name = '#' $(this).data('name');
const id = '#' this.id;
const parent = $(name).parent();
if (!$(this).attr('href')) {
parent.css({ width: Math.max(1200, parent.width()) });
downloadImage(name, id);
e.preventDefault();
} else {
parent.css({ width: '' });
setTimeout(() => $(id).attr('href', ''));
}
});
隨意更改1200為min-width您想要的圖表。目前，如果顯示的圖表寬度大于該值，您將下載更大的影像，如您在評論中所說。我個人覺得這有點奇怪。
如果您改變主意，并希望下載的圖表始終具有相同的大小（即使從較大的顯示幕下載），請替換
parent.css({ width: Math.max(1200, parent.width()) });
和
parent.css({ width: 1920 }); // or whatever fixed chart width you want
看到它作業：http : //jsfiddle.net/websiter/Lzdc3bw1/
uj5u.com熱心網友回復：
可以通過創建新canvas元素和新元素來應用自定義尺寸canvas context
function downloadpng(chartname, chartid) {
var canvas = document.getElementById(chartname);
var url_base64jp = canvas.toDataURL("image/jpg");
var a = document.getElementById(chartid);
var resizedCanvas = document.createElement("canvas");
var resizedContext = resizedCanvas.getContext("2d");
resizedCanvas.height = "1080";
resizedCanvas.width = "1920";
resizedContext.drawImage(canvas, 0, 0, 1920, 1080);
url_base64jp = resizedCanvas.toDataURL("image/jpg");
a.href = url_base64jp;
}
更新了小提琴鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/407515.html
標籤：
上一篇：如何使選擇下拉選單寬度相同？