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