網頁圖表Highcharts實踐教程之圖表區
網頁圖表Highcharts實踐教程之圖表區
網頁圖表Highcharts圖表區
圖表區是圖表的基本區域。
全部的數據和圖形都是繪制在圖表區中。從圖形繪制範圍來分,圖表區域分為外層圖表區和畫圖區。本章將具體解說圖表區的設置和創建。
網頁圖表Highcharts圖表區的構成
為了方便管理,Highcharts將全部的圖表元素都繪制在一個Box區域內,如圖2.1所看到的。這個區域被稱為圖表區。
因為圖表中最重要的數據就是圖表圖形,所以圖表圖形所在的區域又構成一個獨立的區域,稱為畫圖區,如圖2.1所看到的。
圖2.1??圖表區構成
從圖2.1中能夠看到。整個圖表區由坐標軸構成的矩形分為兩個部分:一部分是坐標軸圍成的畫圖區,一部分是圖表區和畫圖區之間的部分。稱為外層圖表區。以下依次解說這兩個部分。
網頁圖表Highcharts外層圖表區
外層圖表區是圖表區和畫圖區之間的部分。標題、圖例這類圖表元素往往都分布在這個區域中。本節將具體解說外層圖表區的設置。
網頁圖表Highcharts外層圖表區的基本設置
外層圖表區基本設置主要包含圖表類型、圖表區所在的HTML元素、外層圖表區的寬高等屬性。以下依次解說這些屬性。
1.圖表類型type
在Highchart中。每種圖表都是由chart組件實現的。所以,要得到不同類型的圖表,必須指定圖表類型。
圖表類型由type配置項指定。語法形式例如以下:
- type:string
當中。string是Highcharts指定的圖表類型字符串。其值能夠為area、arearange、areaspline、areasplinerange、bar、goxplot、bubble、column、columnrange、errorbar、funnel、gauge、heatmap、line、pie、pyramid、scatter、series、solidgauge、spline、waterfail。
假設不指定,默認就是line類型。
在實例1-1中指定了圖表類型為line(折線)類型。
- type: ‘line‘
2.圖表區所在HTML元素renderTo
在腳本中,也能夠通過配置項renderTo直接指定圖表繪制在網頁中哪個容器中。語法形式例如以下:
- renderTo: String
當中,String是網頁元素的id。
在實例1-1中,直接使用了jQuery的選擇器。所以沒有指定該選項。
3.指定外層圖表區大小
在Highcharts中。能夠通過配置項width、height指定外層圖表區的寬和高。語法形式例如以下:
- width:Number1
- height:Number2
當中,Number1、Number2各自是圖表區的寬高值。單位為像素。
【實例2-1:chartheightandwidth】改動實例1-1的代碼。將圖表區寬度設定300px,高度設定為200px。
代碼例如以下:
- ? ? ? ? ? ? ? ??chart: {
- ? ? ? ? ? ? ? ? ? ??type: ‘line‘,
- ? ? ? ? ? ? ? ? ? ??height: 200,???????????????????????????????????????? //指定寬度
- ? ? ? ? ? ? ? ? ? ??width: 300,??????????????????????????????????????????//指定高度
- ? ? ? ? ? ? ? ? ? ??borderWidth: 1
- ? ? ? ? ? ? ? ??},
運行後,效果如圖2.2所看到的。
註意:為了顯示圖表區大小。這裏設置了圖表區的邊框寬度為1px。
圖2.2??設置圖表區的長和寬
假設不設定圖表區的長寬值。Highcharts會依據圖表區中的元素自己主動計算。
假設圖表區包含的元素高度為0,則將Heigh設置為400px。
4.指定外層圖表區背景顏色
為了美化圖表顯示效果,能夠通過配置項backgroundColor來指定圖表區的背景顏色。語法例如以下:
- backgroundColor: Color
當中,Color是使用單引號括起來的顏色值。默認值是#FFFFFF。
【實例2-2:chartbackgroundColor】改動實例2-1的代碼,設定圖表區的背景顏色為#FFFF00。代碼例如以下:
- ? ? ? ? ? ? ? ??chart: {
- ? ? ? ? ? ? ? ? ? ??type: ‘line‘,
- ? ? ? ? ? ? ? ? ? ??height: 200,
- ? ? ? ? ? ? ? ??????width: 400,
- ? ? ? ? ? ? ? ? ? ??borderWidth: 1,
- ? ? ? ? ? ? ? ? ? ??backgroundColor: ‘#FFFF00‘????? //設定背景顏色
- ? ? ? ? ? ? ? ??},
運行後,效果如圖2.3所看到的。
圖2.3??設置圖表區背景顏色
網頁圖表Highcharts外層圖表區的邊框
在Highcharts中。同意為外層圖表區設置邊框。相關的配置項包含寬度borderWidth、顏色borderColor、邊框圓角半徑borderRadius。
其語法例如以下:
- borderWidth:Number1
- borderColor:Color
- borderRadius:Number2
當中。Number1表示邊框的寬度,默認值為0。表示沒有邊框;Color是表示顏色的字符串;Number2表示邊框的圓角半徑。Number1和Number2的的單位均為像素px。
【實例2-3:chartborder】以下改動實例1-1的代碼。為圖表區加入邊框。
須要改動的代碼例如以下:
- ? ? ? ? ? ? ? ??chart: {
- ? ? ? ? ? ? ? ? ????type: ‘line‘,
- ? ? ? ? ? ? ? ? ? ??borderWidth: 3,???????????? //設置邊框的寬度
- ? ? ? ? ? ? ? ? ? ??borderColor: ‘#000000‘,????? //設置邊框的顏色
- ? ? ? ? ? ? ? ? ? ??borderRadius:10??????????? //設置邊框的圓角
- ? ? ? ? ? ? ? ??},
運行後,效果如圖2.4所看到的。
圖2.4??設置圖表區的邊框
網頁圖表Highcharts外層圖表區的範圍
外層圖表區位於圖表區內部,畫圖區外部。如圖2.5的淺綠色部分所看到的。
通常,外層圖表區的範圍由Highcharts自己主動計算。
圖2.5??圖表區和畫圖區的間距
用戶也能夠通過chart組件的配置項marginBottom、marginLeft、marginRight、marginTop屬性來分別設置兩個區域的下邊距、左邊距、右邊距和上邊距。語法例如以下:
- marginBottom:Number1
- marginLeft:Number2
- marginRight:Number3
- marginTop:Number4
當中。Number1、Number2、Number3、Number4分別表示各個邊距值。單位為px。這四個配置項能夠同一時候使用,也能夠分開使用。
【實例2-4:chartmargin】改動實例1-1的圖表區和畫圖區下間距,將其設置為2。改動代碼例如以下:
- ? ? ? ? ? ? ? ??chart: {
- ? ? ? ? ? ? ? ? ? ??type: ‘line‘,
- ? ? ? ? ? ? ? ? ? ??borderWidth: 1,
- ? ? ? ? ? ? ? ? ? ??marginBottom: 2,?????????????????????????????????????? //設置下邊距
- ? ? ? ? ? ? ? ? ? ??marginLeft: 30,?????????????????????????????????????????? //設置左邊距
- ? ? ? ? ? ? ? ? ? ??marginRight: 30,???????????????????????????????????????? //設置右邊距
- ? ? ? ? ? ? ? ? ? ??marginTop:20???????????????????????????????????????????? //設置上邊距
- ? ? ? ? ? ? ? ??},
運行後。效果如圖2.6所看到的。
從運行結果中能夠看到,當邊距設置不當。會造成部分圖表內容顯示不完整,甚至丟失。
比如,x坐標軸的刻度沒有顯示。
圖2.6??改動圖表區和畫圖區間距
為了簡化操作,Highcharts提供一個配置項margin,能夠一次性對四個邊距直接設置。語法例如以下:
- margin:Array
當中,Array是一個數組,用來設置圖表區和畫圖區的上邊距、右邊距、下邊距和左邊距。
使用該屬性後。實例2-4的代碼就能夠簡化為:
- ? ? ? ? ? ??var options = {
- ? ? ? ? ? ? ? ??chart: {
- ? ? ? ? ? ? ? ? ? ??type: ‘line‘,
- ? ? ? ? ? ? ? ? ? ??borderWidth: 1,
- ? ? ? ? ? ? ? ? ? ??margin:[2,30,30,20]?????????????????????????????????? //依次設置上邊距、右邊距、下邊距、左邊距
- ? ? ? ? ? ? ? ??},
網頁圖表Highcharts外層圖表區和圖表內容的間距
為了美觀,圖表中的內容和圖表區之間有一定的間距。如圖2.7所看到的,綠色的部分為兩者之間的間距。
對於這部分間距,chart組件提供了相應的配置項來設置。比如,配置項spacingBottom用來設置下端間距。配置項spacingLeft用來設置左側間距;配置項spacingRight用來設置右側間距;配置項spacingTop用來設置頂部間距。
圖2.7??圖表區和圖表內容的間距
這四個配置項的語法例如以下:
- spacingBottom: Number1
- spacingLeft: Number2
- spacingRight: Number3
- spacingTop: Number4
當中,Number1參數用來設置底部間距,默認值為15;Number2參數用來設置左側間距,默認值為10;Number3參數用來設置右側間距。默認值為10;Number4參數用來設置頂部間距。默認值為10。
【實例2-5:spacing】以下取消實例1-1中,圖表內容和圖表區的間距。改動代碼例如以下:
- ? ? ? ? ? ? ? ??chart: {
- ? ? ? ? ? ? ? ? ? ??type: ‘line‘,
- ? ? ? ? ? ? ? ? ? ??borderWidth: 1,
- ? ? ? ? ? ? ? ? ? ??spacingBottom: 0,???????????????????????????????????? //設置底部間距
- ? ? ? ? ? ? ? ? ? ??spacingLeft: 0,??????????????????????????????????????????? //設置左側間距
- ? ? ? ? ? ? ? ? ? ??spacingRight: 0,???????????????????????????????????????? //設置右側間距
- ? ? ? ? ? ? ? ? ? ??spacingTop:0????????????????????????????????????????????? //設置頂部間距
- ? ? ? ? ? ? ? ??},
運行後,效果如圖2.8所看到的。從圖中能夠發現,取消間距後。圖例和標題緊貼外層圖表區邊框。
圖2.8??取消圖表區和圖表內容間距
為了方便設置,chart組件提供一個配置項spacing。用來同一時候設置四個間距。語法形式例如以下:
- spacing:Array
當中,Array參數是由四個數值構成的數組。當中每一個數值依次表示頂部、右側、底部、左側間距值。
使用屬性spacing能夠簡化實例2-5的代碼。
簡化後的代碼例如以下:
- ? ? ? ? ? ? ? ??chart: {
- ? ? ? ? ? ? ? ? ? ??type: ‘line‘,
- ? ? ? ? ? ? ? ? ? ??borderWidth: 1,
- ? ? ? ? ? ? ? ? ? ? spacing:[0,0,0,0]???????????????????????????????? //依次設置四個間距值
- ? ? ? ? ? ? ? ??},
間距值也能夠設置為負數。代碼例如以下:
- spacing:[-10,-10,-10,-10]
這個時候,會造成部分圖表內容顯示不完整,如圖2.9所看到的。
標題和圖例都沒有全然顯示。
圖2.9??間距值為負值
註意:版權信息部分不受間距影響。
網頁圖表Highcharts外層圖表區陰影
為了添加立體感。chart組件提供陰影配置項。其語法例如以下:
- shadow: Boolean|Object
當中,shadow的參數能夠是布爾值true/false,也能夠是參數對象。
(1)當為布爾值的時候,能夠使用true和false表示是否有屬性。
【實例2-6:shadow】以下為實例1-1加入陰影效果。
改動代碼例如以下:
- ? ??????????????chart: {
- ? ? ? ? ? ? ? ? ? ??type: ‘line‘,
- ? ? ? ? ? ? ? ? ? ??shadow:true??????????????????????????????????????????????? //啟用陰影效果
- ? ? ? ? ? ? ? ??},
運行後,效果如圖2.10所看到的。在圖表區的右側和底端均出現灰色的陰影效果。
圖2.10??圖表陰影
(2)用戶也能夠採用對象的方式加入陰影效果。語法形式例如以下:
- {
- ? ??color:Color,
- ? ??setX:Number1,
- ? ??setY:Number2,
- ? ??opacity:Number3,
- ? ??width:Number4
- }
當中,配置項color表示陰影的顏色。配置項setX表示陰影在x軸上的偏移距離;配置項setY表示陰影在y軸上的偏移距離;配置項opacity表示陰影的透明度;配置項width設置陰影的寬度。
【實例2-7:shadowObject】使用對象的方式又一次實現實例2-6的陰影效果。
改動代碼例如以下:
- ? ? ? ? ? ? ? ??chart: {
- ? ? ? ? ? ? ? ? ? ??type: ‘line‘,
- ? ? ? ? ????????????shadow: {
- ? ? ? ? ? ? ? ? ? ? ? ??color: ‘grey‘,????????????????????????????????????????????????? //設置陰影顏色
- ? ? ? ? ? ? ? ? ? ? ? ??offsetX: 1,????????????????????????????????????????????????????? //設置x軸方向的偏移距離
- ? ? ? ? ? ? ? ? ? ? ? ??offsetY: 1,????????????????????????????????????????????????????? //設置y軸方向的偏移距離
- ? ? ? ? ? ? ? ? ? ? ? ??opacity: 0.5,?????????????????????????????????????????????????? //設置透明度
- ? ? ? ? ? ? ? ? ? ? ? ??width: 2????????????????????????????????????????????????????????? //設置陰影寬度
- ? ? ? ? ? ? ? ? ? ??}
- ? ? ? ? ? ? ? ??},
網頁圖表Highcharts圖表區樣式
為了便於用戶制作出更美觀的圖表,chart組件提供兩個配置項。用來設置圖表所在容器div的CSS樣式。
以下依次解說這兩個屬性。
1.內部樣式style
使用配置項style。能夠直接在Javascript腳本中指定所使用的樣式。其語法形式例如以下:
- style: CSSObject
當中,屬性CSSObject是CSS對象,由CSS屬性和值構成。其默認值例如以下:
- {"fontFamily":"\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif",
- ?"fontSize":"12px"}
2.外部樣式屬性className
為了方便用戶管理CSS腳本,chart組件提供了外部樣式配置項className。
其語法例如以下:
- className: String
當中,參數String表示CSS類選擇器名。具體使用方式,請參考CSS相關書籍。
本文選自:網頁圖表Highcharts實踐教程基礎篇大學霸內部資料。轉載請註明出處。尊重技術尊重IT人!
網頁圖表Highcharts實踐教程之圖表區