Highcharts：使用jspdf導出多個圖表
[英]Highcharts: Export multiple charts using jspdf
問題描述
當我嘗試使用jsPdf導出幾個Highcharts圖表時，我沒有以正確的方式獲取圖表。
你能幫我這個忙嗎？
JAVASCRIPT代碼
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Highcharts.chart('container1', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Highcharts.chart('container2', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Highcharts.chart('container3', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Highcharts.chart('container4', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
function exportToPdf(){
var pdf = new jsPDF('p','pt','a4');
var margins = {
top: 25,
bottom: 60,
left: 20,
width: 522
};
pdf.addHTML(document.body, margins.top, margins.left, {}, function() {
pdf.save('test.pdf');
});
}
HTMl代碼
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src='https://cdn.rawgit.com/simonbengtsson/jsPDF/requirejs-fix-dist/dist/jspdf.debug.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.js'></script>
<script src="https://raw.githubusercontent.com/CBiX/svgToPdf.js/master/svgToPdf.js"></script>
<button onclick="exportToPdf()">
Export
</button>
<div id="container"></div>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
如果使用jsPDf不可能，是否可以使用任何框架導出高位圖表？
jsFiddle鏈接：
1 個解決方案
解決方案1
0 2019-02-19 14:50:53
要使用jspdf下載多個圖表，可以使用以下方法：
- 將AJAX發送給Highcharts服務器，其中包含每個圖表的選項。 返回值將是服務器上圖像的URL。
- 將來自Highcharts服務器的圖像轉換為base64格式（ https://stackoverflow.com/a/20285053/10077925 ）。
- 使用
jspdf庫將圖表圖像，徽標，頁腳添加到pdf並保存結果。
碼：
// ############### CHARTS OPTIONS ############### Highcharts.chart('container1', { title: { text: 'Chart 1' }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [{ name: 'Installation', color: 'red', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }] }); Highcharts.chart('container2', { chart: { type: 'column' }, title: { text: 'Chart 2' }, series: [{ name: 'Manufacturing', color: 'green', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] }], }); Highcharts.chart('container3', { chart: { type: 'bar' }, title: { text: 'Chart 3' }, subtitle: { text: 'Source: thesolarfoundation.com' }, series: [{ name: 'Sales & Distribution', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] }] }); Highcharts.chart('container4', { chart: { backgroundColor: '#efefef', type: 'pie' }, title: { text: 'Chart 4' }, series: [{ name: 'Project Development', color: 'purple', data: [7988, 12169, 15112, 22452, 34400, 34227] }] }); Highcharts.chart('container5', { chart: { backgroundColor: '#c5c5c5', type: 'spline' }, title: { text: 'Chart 5' }, series: [{ name: 'Project Development', color: 'purple', data: [7988, 12169, 15112, 22452, 34400, 34227] }] }); // ############### CHARTS OPTIONS ############### const toDataURL = url => fetch(url) .then(response => response.blob()) .then(blob => new Promise((resolve, reject) => { const reader = new FileReader() reader.onloadend = () => resolve(reader.result) reader.onerror = reject reader.readAsDataURL(blob) })); $('#btn').click(function() { var charts = Highcharts.charts, exportUrl = 'https://export.highcharts.com/', doc = new jsPDF(), pageHeight = doc.internal.pageSize.getHeight(), ajaxCalls = [], promises = [], yDocPos = 0, k = 0, chart, imgUrl, i, j; for (i = 0; i < charts.length; i++) { chart = charts[i]; ajaxCalls.push($.ajax({ type: 'post', url: exportUrl, data: { options: JSON.stringify(chart.userOptions), type: 'image/png', async: true } })); } $.when.apply(null, ajaxCalls).done(function() { for (j = 0; j < arguments.length; j++) { imgUrl = exportUrl + arguments[j][0]; promises[j] = toDataURL(imgUrl); } Promise.all(promises).then((values) => { values.forEach((value, index) => { var page = doc.internal.getCurrentPageInfo(); if (yDocPos > pageHeight - 150) { doc.addPage(); yDocPos = 25; k = 0; } else { yDocPos = 25 + k * 140; } doc.setFontSize(30); doc.text(50, yDocPos, 'jspdf title for Chart' + (index + 1)); yDocPos += 15; doc.addImage(value, 'PNG', 20, yDocPos); k++; }); doc.save('charts.pdf'); }); }); });
<script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script> <button id="btn">Export PDF</button> <br><br> <div> <div id="container1"></div> <div id="container2"></div> <div id="container3"></div> <div id="container4"></div> <div id="container5"></div> </div>
演示：
如何使用Highcharts導出多種尺寸的圖表？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.