2016-07-05 39 views
0

我正在嘗試創建可在多個分辨率下作爲PNG下載的Highchart chart如何使用Highcharts導出多種尺寸的圖表?

我創造了這個的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和縮放屬性,但不管我做什麼,從圖表下載的PNG是1200x800。

我真的很感謝這個問題的任何幫助 - 謝謝!

回答

0

採取的文檔的樣子:

你需要改變的規模,規模將改變你的分辨率。

在這裏你可以看到兩種不同的分辨率,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>