【HighCharts系列教程】七、導出屬性——exporting


一、exporting屬性說明

默認情況下,HighCharts支持將圖表導出為圖片或打印功能的。也就是在圖表的右上角有兩個按鈕。打擊即可進行相應的操作。

實現導出和打印功能需要引入相應的js文件,也就是exporting.js(該文件存在於highCharts壓縮包的/js/modules目錄下)。

一般情況下,我們基本用不上該功能(不引入exporting.js即可去掉該功能),即使是使用該功能,也不用配置,默認的配置就可以。

二、exporting屬性詳解

 

參數 說明 默認值

buttons:{

    exportButton:{…},

    printButton:{…}

}

按鈕屬性,包括導出按鈕(exportButton)及打印按鈕(printButton)。

可配置相應按鈕中具體的屬性來改變按鈕的大小、樣式等

 
enabled 是否使用該功能,當我false時,則圖表沒有導出及打印功能 true
filename 導出圖片文件的文件名,不包含后綴 chart
type 導出圖的類型,有image/png, image/jpeg, application/pdf可選 image/png.
url 導出功能的服務器地址,導出功能需要相應的服務提供支持。你可以自己搭建服務器,在/exporting-server目錄下有相應的源文件 http://export.highcharts.com
width 導出圖片文件的寬度,相應的,高度這按照比例 800.0

 

三、實例說明

 

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', }, credits : { enabled:false//不顯示highCharts版權信息 }, exporting: { //enabled:true,默認為可用,當設置為false時,圖表的打印及導出功能失效 buttons:{ //配置按鈕選項 printButton:{ //配置打印按鈕 width:50, symbolSize:20, borderWidth:2, borderRadius:0, hoverBorderColor:'red', height:30, symbolX:25, symbolY:15, x:-200, y:20 }, exportButton:{ //配置導出按鈕 width:50, symbolSize:20, borderWidth:2, borderRadius:0, hoverBorderColor:'red', height:30, symbolX:25, symbolY:15, x:-150, y:20 }, }, filename:'52wulian.org',//導出的文件名 type:'image/png',//導出的文件類型 width:800 //導出的文件寬度 }, xAxis: { categories: ['2011-11','2011-12','2012-01','2012-02','2012-03'] }, series: [{ name: 'series1', data: [2,4,5,9,2] },{ name:'series2', data:[3,5,7,2,1] }] }); }); }); </script> </head> <body> <script src="js/highcharts.js"></script> <script src="js/exporting.js"></script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html>

四、效果截圖

highcharts_2_5_exporting

五、在線演示

六、資源下載

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM