3.2 外層圖表區

外層圖表區是圖表區和繪圖區之間的部分。標題和圖例這類圖表元素往往都分布在這個區域中。本節將詳細講解外層圖表區的設置。

3.2.1 外層圖表區的基本設置

外層圖表區基本設置主要包括圖表類型、圖表區所在的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-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分別是圖表區的寬和高的值，單位為像素。

【實例3-1：chartheightandwidth】修改實例1-1的代碼，將圖表區寬度設定為300px，高度設定為200px。代碼如下：

chart: {
    type: 'line',
    height: 200,                                    //指定寬度
    width: 300,                                     //指定高度
    borderWidth: 1
},

執行代碼后，效果如圖3.2所示。

注意：為了顯示圖表區大小，這里設置了圖表區的邊框寬度為1px。

圖3.2 設置圖表區的長和寬

如果不設定圖表區的長寬值，Highcharts會根據圖表區中的元素自動計算。如果圖表區包含的元素高度為0，則將Heigh設置為400px。

4．指定外層圖表區背景顏色

為了美化圖表顯示效果，可以通過配置項backgroundColor來指定圖表區的背景顏色。語法如下：

backgroundColor: Color

其中，Color是使用單引號括起來的顏色值，默認值是#FFFFFF。

【實例3-2：chartbackgroundColor】修改實例3-1的代碼，設定圖表區的背景顏色為#FFFF00。代碼如下：

chart: {
    type: 'line',
    height: 200,
    width: 400,
    borderWidth: 1,
    backgroundColor: '#FFFF00'      //設定背景顏色
},

執行代碼后，效果如圖3.3所示。

圖3.3 設置圖表區背景顏色

3.2.2 外層圖表區的邊框

在Highcharts中，允許為外層圖表區設置邊框。相關的配置項包括寬度borderWidth、顏色borderColor和邊框圓角半徑borderRadius。其語法如下：

borderWidth:Number1
borderColor:Color
borderRadius:Number2

其中，Number1表示邊框的寬度，默認值為0，表示沒有邊框；Color表示顏色的字符串；Number2表示邊框的圓角半徑。Number1和Number2的單位均為像素px。

【實例3-3：chartborder】下面修改實例1-1的代碼，為圖表區添加邊框。需要修改的代碼如下：

chart: {
    type: 'line',
    borderWidth: 3,                         //設置邊框的寬度
    borderColor: '#000000',                 //設置邊框的顏色
    borderRadius:10                         //設置邊框的圓角
},

執行代碼后，效果如圖3.4所示。

圖3.4 設置圖表區的邊框

3.2.3 外層圖表區的范圍

外層圖表區位于圖表區內部，繪圖區外部，如圖3.5所示的淺綠色部分所示。通常，外層圖表區的范圍由Highcharts自動計算。

圖3.5 圖表區和繪圖區的間距

用戶也可以通過chart組件的配置項marginBottom、marginLeft、marginRight和marginTop屬性來分別設置兩個區域的下邊距、左邊距、右邊距和上邊距。語法如下：

marginBottom:Number1
marginLeft:Number2
marginRight:Number3
marginTop:Number4

其中，Number1、Number2、Number3、Number4分別表示各個邊距值。單位為px。這4個配置項可以同時使用，也可以分開使用。

【實例3-4：chartmargin】修改實例1-1的圖表區和繪圖區下間距，將其設置為2。修改代碼如下：

chart: {
    type: 'line',
    borderWidth: 1,
    marginBottom: 2,                                        //設置下邊距
    marginLeft: 30,                                 //設置左邊距
    marginRight: 30,                                        //設置右邊距
    marginTop:20                                    //設置上邊距
},

執行代碼后，效果如圖3.6所示。從運行結果中可以看到，當邊距設置不當時，會造成部分圖表內容顯示不完整，甚至丟失。如圖3.6中，x坐標軸的刻度沒有顯示。

圖3.6 修改圖表區和繪圖區間距

為了簡化操作，Highcharts提供一個配置項margin，可以一次性對4個邊距直接設置。語法如下：

margin:Array

其中，Array是一個數組，用來設置圖表區和繪圖區的上邊距、右邊距、下邊距和左邊距。使用該屬性后，實例3-4的代碼就可以簡化為：

var options = {
    chart: {
        type: 'line',
        borderWidth: 1,
        margin:[2,30,30,20]         //依次設置上邊距、右邊距、下邊距、左邊距
    },

3.2.4 外層圖表區和圖表內容的間距

為了美觀，圖表中的內容和圖表區之間有一定的間距。如圖3.7所示，綠色的部分為兩者之間的間距。對于這部分間距，chart組件提供了對應的配置項來設置。例如，配置項spacingBottom用來設置下端間距；配置項spacingLeft用來設置左側間距；配置項spacingRight用來設置右側間距；配置項spacingTop用來設置頂部間距。

圖3.7 圖表區和圖表內容的間距

這4個配置項的語法如下：

spacingBottom: Number1
spacingLeft: Number2
spacingRight: Number3
spacingTop: Number4

其中，Number1參數用來設置底部間距，默認值為15；Number2參數用來設置左側間距，默認值為10；Number3參數用來設置右側間距，默認值為10；Number4參數用來設置頂部間距，默認值為10。

【實例3-5：spacing】下面取消實例1-1中圖表內容和圖表區的間距。修改代碼如下：

chart: {
    type: 'line',
    borderWidth: 1,
    spacingBottom: 0,                               //設置底部間距
    spacingLeft: 0,                         //設置左側間距
    spacingRight: 0,                                //設置右側間距
    spacingTop:0                            //設置頂部間距
},

執行代碼后，效果如圖3.8所示。從圖中可以發現，取消間距后，圖例和標題緊貼外層圖表區邊框。

圖3.8 取消圖表區和圖表內容間距

為了方便設置，chart組件提供了一個配置項spacing，用來同時設置4個間距。語法形式如下：

spacing:Array

其中，Array參數是由4個數值構成的數組。其中每個數值依次表示頂部、右側、底部和左側間距值。使用屬性spacing可以簡化實例3-5的代碼。簡化后的代碼如下：

chart: {
    type: 'line',
    borderWidth: 1,
    spacing:[0,0,0,0]                           //依次設置四個間距值
},

間距值也可以設置為負數，代碼如下：

spacing:[-10,-10,-10,-10]

這個時候，會造成部分圖表內容顯示不完整，如圖3.9所示。標題和圖例都沒有完全顯示。

圖3.9 間距值為負值

注意：版權信息部分不受間距影響。

3.2.5 外層圖表區陰影

為了增加立體感，chart組件提供陰影配置項。其語法如下：

shadow: Boolean|Object

其中，shadow的參數可以是布爾值true/false，也可以是參數對象。

（1）當參數為布爾值的時候，可以使用true和false表示是否有屬性。

【實例3-6：shadow】下面為實例1-1添加陰影效果。修改代碼如下：

chart: {
    type: 'line',
    shadow:true                                             //啟用陰影效果
},

執行代碼后，效果如圖3.10所示。在圖表區的右側和底端均出現灰色的陰影效果。

圖3.10 圖表陰影

（2）用戶也可以采用對象的方式添加陰影效果。語法形式如下：

{
    color:Color,
    setX:Number1,
    setY:Number2,
    opacity:Number3,
    width:Number4
}

其中，配置項color表示陰影的顏色；配置項setX表示陰影在x軸上的偏移距離；配置項setY表示陰影在y軸上的偏移距離；配置項opacity表示陰影的透明度；配置項width設置陰影的寬度。

【實例3-7：shadowObject】使用對象的方式重新實現實例3-6的陰影效果。修改代碼如下：

chart: {
    type: 'line',
    shadow: {
        color: 'grey',                                      //設置陰影顏色
        offsetX: 1,                                         //設置x軸方向的偏移距離
        offsetY: 1,                                         //設置y軸方向的偏移距離
        opacity: 0.5,                                               //設置透明度
        width: 2                                            //設置陰影寬度
    }
},

3.2.6 圖表區樣式

為了便于用戶制作出更美觀的圖表，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相關書籍。