網頁圖表Highcharts實踐教程以外層圖表區

時間 2019-11-06

標籤網頁圖表 highcharts 實踐教程外層欄目 HTML 简体版

原文原文鏈接

網頁圖表Highcharts實踐教程以外層圖表區

Highcharts圖表區

圖表區是圖表的基本區域。全部的數據和圖形都是繪製在圖表區中。從圖形繪製範圍來分，圖表區域分爲外層圖表區和繪圖區。本章將詳細講解圖表區的設置和建立。數組

Highcharts圖表區的構成

爲了方便管理，Highcharts將全部的圖表元素都繪製在一個Box區域內，如圖2.1所示。這個區域被稱爲圖表區。因爲圖表中最重要的數據就是圖表圖形，因此圖表圖形所在的區域又構成一個獨立的區域，稱爲繪圖區，如圖2.1所示。spa
圖2.1 圖表區構成code
從圖2.1中能夠看到，整個圖表區由座標軸構成的矩形分爲兩個部分：一部分是座標軸圍成的繪圖區，一部分是圖表區和繪圖區之間的部分，稱爲外層圖表區。下面依次講解這兩個部分。orm

Highcharts外層圖表區

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

Highcharts外層圖表區的基本設置

外層圖表區基本設置主要包括圖表類型、圖表區所在的HTML元素、外層圖表區的寬高等屬性。下面依次講解這些屬性。教程

1.圖表類型typeip

在Highchart中，每種圖表都是由chart組件實現的。因此，要獲得不一樣類型的圖表，必須指定圖表類型。圖表類型由type配置項指定。語法形式以下：ci

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類型。string

在實例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 圖表區和圖表內容的間距

這四個配置項的語法以下：