網頁圖表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實踐教程之圖表區