如何使用Highcharts导出多种尺寸的图表？

Question

我正在尝试创建一个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。

非常感谢您提供有关此问题的帮助-谢谢！

Answer 1

第一个参数用于导出选项，因此您应该将代码更改为此：

export_for_print = function() {
  var chart = $('#container').highcharts();
  chart.exportChartLocal({
     sourceWidth: 4000,
     sourceHeight: 2000,
     scale: 6
  }, null);
};

http://api.highcharts.com/highcharts#Chart.exportChart

Answer 2

看一下文档：

您需要更改比例，比例将更改您的分辨率。

在这里，您可以看到一个具有两种不同分辨率（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>