【1】 highcharts繪圖中最全的參數配置
chart.events.addSeries：添加數列到圖表中。
chart.events.click：整個圖表的繪圖區上所發生的點擊事件。
chart.events.load：圖表加載事件。
chart.events.redraw：圖表重畫事件，當點擊圖注顯示和隱藏繪圖時可以觸發。
chart.events.selection：當圖表曲線可選擇放大時，當選擇圖表操作時，可以觸發該事件。
chart.height：所繪製圖表的高度值。
chart.inverted：圖表中的x，y軸對換。
chart.polar：是否爲極性圖表。
chart.reflow：當窗口大小改變時，圖表寬度自適應窗口大小改變。
chart.renderTo：圖表加載的位置，是頁面上的一個DOM對象。
chart.showAxes：在空白圖表中，是否顯示座標軸。
chart.type：圖表的類型，默認爲line，還有bar/column/pie……
chart.width：圖表繪圖區的寬度，默認爲自適應。
chart.zoomType：圖表中數據報表的放大類型，可以以X軸放大，或是以Y軸放大，還可以以XY軸同時放大。
colors：圖表中多數列時，各數列之間的顏色。是一個數組，一般不動。
credits.enabled：是否允許顯示版權信息。
credits.href：版權所有的鏈接。
credits.text：版權信息顯示文字。
exporting.buttons.exportButton.enabled：是否允許顯示導出按鈕。
exporting.buttons.exportButton.menuItems：導出按鈕的菜單選項。
exporting.buttons.exportButton.onclick：導出按鈕被點擊的事件，不是內部的菜單。
exporting.buttons.printButton.enabled：是否允許打印按鈕。
exporting.buttons.printButton.onclick：打印按鈕的點擊事件。
exporting.enabled：打印和導出按鈕是否被允許。
exporting.filename：被導出文件的文件名。
exporting.type：默認導出圖片的文件格式。
exporting.url：SVG圖表轉換並導出的接口處理地址。
exporing.width：默認導出圖片的寬度。
labels：標籤，可以加載到圖表的任何位置，裏面有items，style。
lang：語言參數配置，與導出按鈕菜單有關的配置，時間名稱的配置等。
legend.enabled：是否允許圖注。
navigation.buttonOptions.enabled：圖表中所有導航中的按鈕是否可被點擊。
plotOptions.area.allowPointSelect：是否允許數據點的點擊。
plotOptions.area.color：繪圖的顏色。
plotOptions.area.dataLabels.enabled：是否允許數據標籤。
plotOptions.area.enableMouseTracking：是否允許數據圖表中，數據點的鼠標跟蹤氣泡顯示。
plotOptions.area.events.checkboxClick：數據圖表中圖注中複選框的點擊事件。
plotOptions.area.events.click：數據圖表中，數據點的點擊事件。
plotOptions.area.events.hide：數據圖表中，某一數據序列隱藏時的事件。
plotOptions.area.events.show：數據圖表中，某一數據序列顯示時的事件。
plotOptions.area.events.legendItemClick：數據圖表中，圖注中的項目被點擊時的事件，直接賦值false，則不可點擊。
plotOptions.area.events.mouseOut：數據點的鼠標移出事件。
plotOptions.area.events.mouseOver：數據點的鼠標經過事件。
plotOptions.area.marker.enabled：圖表中繪圖中是否顯示點的標記符。
plotOptions.area.marker.states.hover.enabled：是否允許標記符的鼠標經過狀態。
plotOptions.area.marker.states.select.enabled：是否允許標記符的選擇狀態。
plotOptions.area.point.events.click：圖表中每一個單獨的點點擊事件。
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove：刪除圖表中的點時的事件。
plotOptions.area.point.events.select：圖表中點選擇事件。
plotOptions.area.point.events.unselect：圖表中點取消選擇時的事件。
plotOptions.area.point.events.update：圖表中數據發生更新時的事件。
plotOptions.area.visible：加載時，數據序列默認是顯示還是隱藏。
plotOptions.area.zIndex：在多序列的情況下，調整每一個序列的層疊順序。
以上的point.events同樣還適用於其他面積類圖表（arearange、areaspline、areasplinerange），其他的柱狀圖（bar、column）及所有圖表。
plotOptions.area.showInLegend：是否在圖注中顯示。
plotOptions.area.stacking：是以值堆疊，還是以百分比堆疊。
plotOptions.area.states.hover.enabled：鼠標放上的狀態是否允許。
plotOptions.area.stickyTracking：鼠標粘性跟蹤數據點。
plotOptions.arearange，plotOptions.areaspline，plotOptions.areasplinerange類同於plotOptions.area
plotOptions.bar.groupPadding：對於柱狀圖分組，每個分組之間的間隔。
plotOptions.bar.grouping：是否對數據進行分組。
plotOptions.bar.minPointLength:：定義當point值爲零時，點的最小長度爲多少
plotOptions.bar.showInLegend：是否在圖注中顯示。
plotOptions.bar.stacking：是以值堆疊，還是以百分比堆疊（normal/percent）。
plotOptions.column，plotOptions.columnrange類同於plotOptions.bar
plotOptions.line的相關配置類似於plotOptions.area配置。
plotOptions.pie.ignoreHiddenPoint：在餅狀圖中，某一個序列經圖注點擊隱藏後，整個餅狀圖是重新以100%分配，還是隻在原圖基礎上隱藏，呈現一個缺口。
plotOptions.pie.innerSize：繪製餅狀圖時，餅狀圖的圓心預留多大的空白。
plotOptions.pie.slicedOffset：與allowPointSelect結合使用，當點被點擊時，對應的扇區剝離，這個參數即配置離開的距離。
plotOptions.pie的其他常用配置參數類同於plotOptions.area,plotOptions.scatter，plotOptions.series，plotOptions.spline的相關配置類似於plotOptions.area配置。
series：是一個數組。
series.data.color：某一個數據的顏色。
chart.events.addSeries：添加數列到圖表中。
chart.events.click：整個圖表的繪圖區上所發生的點擊事件。
chart.events.load：圖表加載事件。
chart.events.redraw：圖表重畫事件，當點擊圖注顯示和隱藏繪圖時可以觸發。
chart.events.selection：當圖表曲線可選擇放大時，當選擇圖表操作時，可以觸發該事件。
chart.height：所繪製圖表的高度值。
chart.inverted：圖表中的x，y軸對換。
chart.polar：是否爲極性圖表。
chart.reflow：當窗口大小改變時，圖表寬度自適應窗口大小改變。
chart.renderTo：圖表加載的位置，是頁面上的一個DOM對象。
chart.showAxes：在空白圖表中，是否顯示座標軸。
chart.type：圖表的類型，默認爲line，還有bar/column/pie……
chart.width：圖表繪圖區的寬度，默認爲自適應。
chart.zoomType：圖表中數據報表的放大類型，可以以X軸放大，或是以Y軸放大，還可以以XY軸同時放大。
colors：圖表中多數列時，各數列之間的顏色。是一個數組，一般不動。
credits.enabled：是否允許顯示版權信息。
credits.href：版權所有的鏈接。
credits.text：版權信息顯示文字。
exporting.buttons.exportButton.enabled：是否允許顯示導出按鈕。
exporting.buttons.exportButton.menuItems：導出按鈕的菜單選項。
exporting.buttons.exportButton.onclick：導出按鈕被點擊的事件，不是內部的菜單。
exporting.buttons.printButton.enabled：是否允許打印按鈕。
exporting.buttons.printButton.onclick：打印按鈕的點擊事件。
exporting.enabled：打印和導出按鈕是否被允許。
exporting.filename：被導出文件的文件名。
exporting.type：默認導出圖片的文件格式。
exporting.url：SVG圖表轉換並導出的接口處理地址。
exporing.width：默認導出圖片的寬度。
labels：標籤，可以加載到圖表的任何位置，裏面有items，style。
lang：語言參數配置，與導出按鈕菜單有關的配置，時間名稱的配置等。
legend.enabled：是否允許圖注。
navigation.buttonOptions.enabled：圖表中所有導航中的按鈕是否可被點擊。
plotOptions.area.allowPointSelect：是否允許數據點的點擊。
plotOptions.area.color：繪圖的顏色。
plotOptions.area.dataLabels.enabled：是否允許數據標籤。
plotOptions.area.enableMouseTracking：是否允許數據圖表中，數據點的鼠標跟蹤氣泡顯示。
plotOptions.area.events.checkboxClick：數據圖表中圖注中複選框的點擊事件。
plotOptions.area.events.click：數據圖表中，數據點的點擊事件。
plotOptions.area.events.hide：數據圖表中，某一數據序列隱藏時的事件。
plotOptions.area.events.show：數據圖表中，某一數據序列顯示時的事件。
plotOptions.area.events.legendItemClick：數據圖表中，圖注中的項目被點擊時的事件，直接賦值false，則不可點擊。
plotOptions.area.events.mouseOut：數據點的鼠標移出事件。
plotOptions.area.events.mouseOver：數據點的鼠標經過事件。
plotOptions.area.marker.enabled：圖表中繪圖中是否顯示點的標記符。
plotOptions.area.marker.states.hover.enabled：是否允許標記符的鼠標經過狀態。
plotOptions.area.marker.states.select.enabled：是否允許標記符的選擇狀態。
plotOptions.area.point.events.click：圖表中每一個單獨的點點擊事件。
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove：刪除圖表中的點時的事件。
plotOptions.area.point.events.select：圖表中點選擇事件。
plotOptions.area.point.events.unselect：圖表中點取消選擇時的事件。
plotOptions.area.point.events.update：圖表中數據發生更新時的事件。
plotOptions.area.visible：加載時，數據序列默認是顯示還是隱藏。
plotOptions.area.zIndex：在多序列的情況下，調整每一個序列的層疊順序。
以上的point.events同樣還適用於其他面積類圖表（arearange、areaspline、areasplinerange），其他的柱狀圖（bar、column）及所有圖表。
plotOptions.area.showInLegend：是否在圖注中顯示。
plotOptions.area.stacking：是以值堆疊，還是以百分比堆疊。
plotOptions.area.states.hover.enabled：鼠標放上的狀態是否允許。
plotOptions.area.stickyTracking：鼠標粘性跟蹤數據點。
plotOptions.arearange，plotOptions.areaspline，plotOptions.areasplinerange類同於plotOptions.area
plotOptions.bar.groupPadding：對於柱狀圖分組，每個分組之間的間隔。
plotOptions.bar.grouping：是否對數據進行分組。
plotOptions.bar.minPointLength:：定義當point值爲零時，點的最小長度爲多少
plotOptions.bar.showInLegend：是否在圖注中顯示。
plotOptions.bar.stacking：是以值堆疊，還是以百分比堆疊（normal/percent）。
plotOptions.column，plotOptions.columnrange類同於plotOptions.bar
plotOptions.line的相關配置類似於plotOptions.area配置。
plotOptions.pie.ignoreHiddenPoint：在餅狀圖中，某一個序列經圖注點擊隱藏後，整個餅狀圖是重新以100%分配，還是隻在原圖基礎上隱藏，呈現一個缺口。
plotOptions.pie.innerSize：繪製餅狀圖時，餅狀圖的圓心預留多大的空白。
plotOptions.pie.slicedOffset：與allowPointSelect結合使用，當點被點擊時，對應的扇區剝離，這個參數即配置離開的距離。
plotOptions.pie的其他常用配置參數類同於plotOptions.area,plotOptions.scatter，plotOptions.series，plotOptions.spline的相關配置類似於plotOptions.area配置。
series：是一個數組。
series.data.color：某一個數據的顏色。
series.data.dataLabels：序列中某一個數據的數據標籤。
series.data.events類同於plotOptions.area.point.events的相關配置。
series.data.marker類同於plotOptions.area.marker的相關配置。
series.data.name：配置數據點的名稱。
series.data.sliced：配置在餅圖中，扇區的分離距離大小。
series.data.x：點的x值。
series.data.y：點的y值。
series.name：數據序列的名稱。
series.stack：堆疊的分組索引。
series.type：數據序列的展示類型。
series.xAxis，series.yAxis：當使用多座標軸時，指定某個數列對應哪個座標軸。
subtitle：配置圖表的子標題。
title：配置圖表的標題。
tooltip：配置圖表中數據的氣泡提示。
tooltip.valueDecimals：允許的小數點位數。
tooltip.percentageDecimals：允許百分比的小數點後位數。
xAxis，yAxis配置設置座標軸
allowDecimals：座標軸上是否允許小數。
categories：是一個數組，座標軸的分類。
plotLines：繪製主線。
tickColor：刻度顏色。
tickInterval：刻度的步進值。
labels.rotation：刻度標籤旋轉度數
【2】如何改變報表中打印圖標和導出圖標的中英文顯示
n(v.lang,{downloadPNG:"下載PNG圖片",downloadJPEG:"下載JPEG圖片",downloadPDF:"下載PDF文檔",downloadSVG:"下載矢量圖像",exportButtonTitle:"導出報表圖像",printButtonTitle:"打印報表"});
【3】組裝添加顯示highchart圖表所用的數據
顯示highchart圖標的js代碼
$(function () {
//填充數據使用,使用jquery來獲取隱藏域的值
var xAxisTimeInfo = $("#xAxisTime").val();
var totalRecordInfo = $("#totalRecord").val();
var totalRecordHYInfo = $("#totalRecordHY").val();
var totalRecordLJInfo = $("#totalRecordLJ").val();
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: '每月訂單數量統計'
},
subtitle: {//副標題
text: ''
},
exporting:{
filename:"訂單統計", //下載顯示的文件名稱
sourceWidth: 1000, //下載圖片的寬度
sourceHeight: 550, //下載圖片的高度
//指定下載圖片的url，這裏使用的本地的java代碼，沒有使用官網的代碼(那//樣會受到highchart官網的網絡限制,這裏的java代碼是結合的struts1來//實現的，在java代碼解決了導出圖片中中文亂碼的問題以及下載文件名亂碼//的問題,詳見java代碼中說明) url:'<%=basePath%>shop/newOrder/orderPre/exportImage.do'//這裏是一個重點哦,也可以修改exporting.js中對應的url
},
/**
* 去掉圖標的右下角HightCharts.com 的圖標
*/
credits: {
enabled : false, //設置false就不會顯示右下角的官網鏈接
//右下角連接的顯示位置
position:{ align: 'right',x: -8, verticalAlign: 'bottom',y: -390 },
//右下角鏈接的地址href:'<%=basePath%>shop/newOrder/orderPre/orderSearch4HighCharts.do?type=1',
text:'區域圖表',//右下角連接的名字
style : {cursor:'pointer',color:'#909090',fontSize:'20px'}
},
xAxis: {
categories: eval(xAxisTimeInfo)
},
yAxis: {
min: 0,
title: {
text: '單位 (個)'
}
},
//鼠標旁邊的提示框的樣式
//1. point.y:.0f 提示框中顯示的y軸單位的小數點位數
//2. style="width:160px;height:50px" 提示框的寬高
//3. point.key 座標的x軸的值
tooltip: {
headerFormat: '<span style="font-size:20px;">{point.key}</span><table style="width:160px;height:50px">',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.0f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
//圖例的顯示名稱和數據
//這裏使用了eval函數處理一下，使用jquery獲取到的隱藏域的值
//否則不會顯示
series: [{
name: '裸機數量',
data: eval(totalRecordLJInfo)
}, {
name: '訂單總量',
data: eval(totalRecordInfo)
}, {
name: '合約機數量',
data: eval(totalRecordHYInfo)
}]
});
});<h3>【4】重點說一下exporting參數的使用</h3><p style="color: rgb(54, 46, 43); font-family: Arial; line-height: 26px;"><span style="font-size:18px;"> </span><span style="font-size:14px;"><span style="color: rgb(255, 0, 0);">(1)exportButton:</span>導出按鈕樣式</span></p><p style="color: rgb(54, 46, 43); font-family: Arial; line-height: 26px;"><span style="font-size:14px;"> (11)hoverSymbolFill:鼠標移上去改變按鈕箭頭的顏色，String型，默認值爲#768F3E.</span></p><p style="color: rgb(54, 46, 43); font-family: Arial; line-height: 26px;"><span style="font-size:14px;"> (12)onclick:點擊報表導出按鈕事件一般和menuItems同時使用。</span></p><p style="color: rgb(54, 46, 43); font-family: Arial; line-height: 26px;"><span style="font-size:14px;"> (13)menuItems:點擊導出按鈕的時候出現的下拉列表的設置選項，一般和onclick同時使用，Array類型。</span></p><p style="color: rgb(54, 46, 43); font-family: Arial; line-height: 26px;"><span style="font-size:14px;">例如</span></p><p style="color: rgb(54, 46, 43); font-family: Arial; line-height: 26px;"><span style="font-size:14px;"></span><pre name="code" class="html"> exporting : {
enabled : true,
buttons : {
exportButton : {
menuItems: [{
text: '導出PNG圖片(寬度爲250px)',
onclick:function() {
this.exportChart({
width:200 //導出報表的寬度
});
}
}, {
text: '導出PNG圖片(寬度爲800px)',
onclick:function() {
this.exportChart();// 800px by default
}
},
null,
null
]
},
printButton: {
enabled : false
}
}
}點擊時出現自己設置的下拉標題以及導出圖片的大小。
(14)symbol : 符號的按鈕。點定義功能在Highcharts.Renderer.symbols集合。String類型，默認值爲“exportIcon”。symbol的可選值有'circle', 'diamond','exportIcon', 'printIcon', 'square', 'triangle'和'triangle-down'對應的圖片如下所示：
(15)symbolFill : symbol的背景色，String類型，默認值是#A8BF77
(16)x : 相對於本身橫向的位置，正負數都可以，Number類型，默認值是10
(17)align: 在報表中的水平位置，String類型，可選值有"left"，"center"，"right"，默認是"right"
(18)backgroundColor: 報表導出圖片按鈕的背景色設置
例如：
backgroundColor:{
linearGradient:[0, 0, 0, 20],
stops:[
[0.1,'#ff0000'],
[0.9,'#00ff00']
]
}(19)borderColor: 報表導出按鈕邊框的顏色，String類型，默認值是#B0B0B0
(20)borderRadius: 報表導出按鈕邊框四個對角的圓滑程度，Number類型，默認值是3
(21)borderWidth: 報表導出按鈕邊框的寬度，Number類型，默認值是1
(22)enabled: 報表導出按鈕是否啓用，Boolean類型，默認值是true
(23)height: 報表導出按鈕的高度，Number類型，默認值是20
(24)hoverBorderColor: 鼠標經過報表導出按鈕時邊框的顏色，String類型，默認值是#909090
(25)hoverSymbolStroke : 鼠標經過報表導出按鈕的中間那個箭頭的邊框顏色，String類型，默認值是#4572A5
(26)symbolSize : 報表導出按鈕的中間那個箭頭的大小尺寸，Number類型，默認值是12
(27)symbolStroke : 報表導出按鈕的中間那個箭頭的邊框顏色，String類型，默認值是#A0A0A0
(28)symbolStrokeWidth : 報表導出按鈕的中間那個箭頭的邊框寬度，Number類型，默認值是1
(29)symbolX : 報表導出按鈕的中間那個箭頭的橫向位置，Number類型，默認值是11.5
(30)symbolY : 報表導出按鈕的中間那個箭頭的縱向位置，Number類型，默認值是10.5
(31)verticalAlign : 報表導出按鈕的垂直對齊方式，String類型，可選項是"top", "middle" 或者 "bottom". 默認值是"top"
(32)width : 報表導出按鈕的寬度，Number類型，默認值是24
(33)y : 相對於本身縱向的位置，正負數都可以，Number類型，默認值是10
(2)printButton:打印按鈕樣式
2、enabled:是否顯示按鈕（也就是啓用打印導出功能），布爾型，默認顯示true
3、filename:導出報表圖片的文件名，String型,默認值chart，不支持中文名字的命名
4、type：如果chart.exportChart()調用時沒有指定類型選項，默認的MIME類型。
可能的值是image/png, image/jpeg, application/pdf andimage/svg+xml. 默認的值是"image/png".
5、url：轉換圖片的服務器url，默認是用免費網絡服務器highcharts，默認值http://export.highcharts.com
6、width：導出PNG或JPG圖片大小，數字型。默認值800
注意：width和height的比值爲2:1，設置width的時候，最好設置成200的倍數，不然設置成100或300等寬度時候，下載的時間會比較長。
