一、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,