[英]How to export charts in multiple sizes with Highcharts?
我正在嘗試創建一個Highchart圖表 ,可以將其下載為多種分辨率的PNG。
我已經創建了這個JSFiddle文件作為測試: http : //jsfiddle.net/4v133hnm/26/
我認為這是相關的代碼:
export_for_print = function() {
var chart = $('#container').highcharts();
chart.exportChartLocal(null, {
chart: {
sourceWidth: 4000,
sourceHeight: 2000,
scale: 6
}
});
};
導出工作正常,但只能通過單個分辨率進行。
如果您查看自定義的“導出為電子郵件/桌面/打印”功能,我已經嘗試更改sourceWidth,sourceHeight和scale屬性,但是無論如何,從圖表下載的PNG都是1200x800。
非常感謝您提供有關此問題的幫助-謝謝!
第一個參數用於導出選項,因此您應該將代碼更改為此:
export_for_print = function() {
var chart = $('#container').highcharts();
chart.exportChartLocal({
sourceWidth: 4000,
sourceHeight: 2000,
scale: 6
}, null);
};
看一下文檔:
您需要更改比例,比例將更改您的分辨率。
在這里,您可以看到一個具有兩種不同分辨率(600x400和1200x800)的示例:
http://api.highcharts.com/highcharts#exporting.scale
$(function () { $('#container').highcharts({ title: { text: 'Highcharts exporting scale demo' }, subtitle: { text: 'This subtitle is HTML', useHTML: true }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }], exporting: { allowHTML: true, enabled: false } }); $('button.export').click(function () { $('#container').highcharts() .exportChart({ scale: $(this).data().scale//take a look here }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div style="width: 600px; margin: 0 auto"> <div id="container" style="height: 400px"></div> <button class="export" data-scale="1">Scale = 1</button> <button class="export" data-scale="2">Scale = 2</button> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.