highcharts 配置選項

        Highcharts給了豐富的配置項，用於知足用戶的需求。在我這個項目中，圖表開始由美工設計，在應用highcharts的時候，讀了highcharts的文檔，着實仔細的配置了一番。

好比Legend的配置，座標軸的樣式等等。

先附上一個表格，再記錄幾個項目中用到的例子，備用。

1.  xAxis：X軸選項

X軸選項用於設置圖表X軸相關屬性。

參數	描述	默認值
categories	設置X軸分類名稱，數組，例如：categories: ['Apples', 'Bananas', 'Oranges']	[]
title	X軸名稱，支持text、enabled、align、rotation、style等屬性
labels	設置X軸各分類名稱的樣式style，格式formatter，角度rotation等。	array
max	X軸最大值(categories爲空時)，若是爲null，則最大值會根據X軸數據自動匹配一個最大值。	null
min	X軸最小值(categories爲空時)，若是爲null，則最小值會根據X軸數據自動匹配一個最小值。	array
gridLineColor	網格（豎線）顏色	#C0C0C0
gridLineWidth	網格(豎線)寬度	1
lineColor	基線顏色	#C0D0E0
lineWidth	基線寬度

2. yAxis：Y軸選項

Y軸選項與上述xAxis選項基本一致，請參照上表中的參數設置，再也不單獨列出。

3. Series：數據列選項

數據列選項用於設置圖表中要展現的數據相關的屬性。

參數	描述	默認值
data	顯示在圖表中的數據列，能夠爲數組或者JSON格式的數據。如：data:[0, 5, 3, 5]，或 data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]	''
name	顯示數據列的名稱。	''
type	數據列類型，支持 area, areaspline, bar, column, line, pie, scatter or spline	line

4. plotOptions：數據點選項

plotOptions用於設置圖表中的數據點相關屬性。plotOptions根據各類圖表類型，其屬性設置略微有些差別，現將經常使用選項列出來。

 

參數	描述	默認值
enabled	是否在數據點上直接顯示數據	false
allowPointSelect	是否容許使用鼠標選中數據點	false
formatter	回調函數，格式化數據顯示內容	formatter: function() {return this.y;}

 

 

 

5. Tooltip：數據點提示框

Tooltip用於設置當鼠標滑向數據點時顯示的提示框信息。

參數	描述	默認值
enabled	是否顯示提示框	true
backgroundColor	設置提示框的背景色	rgba(255, 255, 255, .85)
borderColor	提示框邊框顏色，默認自動匹配數據列的顏色	auto
borderRadius	提示框圓角度	5
shadow	是否顯示提示框陰影	true
style	設置提示框內容樣式，如字體顏色等	color:'#333'
formatter	回調函數，用於格式化輸出提示框的顯示內容。返回的內容支持html標籤如：<b>, <strong>, <i>, <em>, <br/>, <span>	2

6. exporting:導出選項

通常都禁用了

7. credits：商標

 通常都禁用了

8. Legend：圖例選項

legend用於設置圖例相關屬性。

參數	描述	默認值
layout	顯示形式，支持水平horizontal和垂直vertical	horizontal
align	對齊方式。	center
backgroundColor	圖例背景色。	null
borderColor	圖例邊框顏色。	#909090
borderRadius	圖例邊框角度	5
enabled	是否顯示圖例	true
floating	是否能夠浮動，配合x，y屬性。	false
shadow	是否顯示陰影	false
style	設置圖例內容樣式	''
symbolWidth	設置圖例中標誌的寬度	若是不想要這個標誌，把寬度設置爲0
itemHoverStyle	圖例中文字hover時的樣式
itemStyle	圖例文字的樣式	{ "color": "#fff","font-size":"18px","font-family":"微軟雅黑","font-weight":"normal" }

 

 項目中的例子:

 

 

在這個圖表中，看不到x軸和Y軸，有tooltip 

配置是這樣的：

 

 

xAxis: {
　　labels: {
　　　　enabled: false //不顯示x軸上的label，數字標識
　　},
 
gridLineWidth: 0, //不顯示錶格線
lineWidth: 0 //不顯示座標軸線
},
yAxis: {
　　labels: {
　　enabled: false
　　 // min: 0 //min:0 表示y軸最小從0開始，註釋掉，則y軸支持負值
　　},
min: 0,
gridLineWidth: 0,
title: {
　　text: '',
　　align: 'high'
},

title: {
align: 'left',
text: '銷售趨勢圖',
x: 10,
y: 30,  //配置Title的座標
useHTML: true,
style: { "color": "#fff", "font-size": "18px", "font-family": "微軟雅黑", "font-weight": "normal" }
}

Example 2：

 在這個圖中， 柱子背景顏色不一樣，嘗試使用colors屬性設置，並不起做用，後來發現設置series 的data屬性能夠達到效果。

 series: [{
                        name: 'Population',
                        data: [{'color':'顏色值','y':'數值'},
                   　　　　　　  {'color':'顏色值','y':'數值'},
                   　　　　　　  {'color':'顏色值','y':'數值'},
                   　　　　　　  {'color':'顏色值','y':'數值'}], //設置柱上的背景顏色和數值
                        dataLabels: {//設置柱上的數字顯示樣式
                            enabled: true,
                            color: '#666',
                            align: 'center',
                            x: 14,
                            y: 0,
                            style: {
                                fontSize: '13px',
                                fontFamily: 'Verdana, sans-serif'
                                
                            }
                        }
                    }]