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'
                                
                            }
                        }
                    }]

 


免責聲明!

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



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