網頁圖表Highcharts實踐教程標之添加題副標題版權信息

網頁圖表Highcharts實踐教程標之添加題副標題版權信息

Highcharts輔助元素

輔助元素圖表的非必要元素，如標題、版權信息、標籤、載入動態。它們不和圖表數據發生關聯，只是額外說明一些基本信息。合理的使用這些部分，能夠補充數據的不足。本章將詳細講解幾種常見的輔助元素。

Highcharts標題/副標題

爲了說明圖表展示的數據，Highcharts爲每一個圖表提供標題title和副標題subtitle兩個組件。本節將詳細講解這兩個組件的使用方式。

Highcharts標題和副標題的構成

在實例1-1中，咱們已經接觸到標題的構建了。其中構建標題的代碼以下所示：

• title: {

•     text: '北京一週最高溫度'

• },

其中，title標記爲圖表構建一個標題；配置項text表示標題的內容。其語法以下：

• text:String

其中，參數String指定標題的文本內容。默認值是'Chart title'。若是不要想要標題，必須將設置爲null。

副標題subtitle的構成方式相似於標題title。其語法形式以下：

• subtitle:{

•     text:String

• }

subtitle組件也具備配置項text。該配置項的默認值爲空。若是不設置配置項text，則不顯示副標題。

【實例3-1：title】修改實例1-1的源代碼以下：

•                 chart: {

•                     type: 'line'

•                 },

•                 subtitle: {

•                     text:''

•                 },

•                 series: [{

•                     name: '最高溫度',

•                     data: [7, 11, 8, 7, 9, 9, 9]

•                 }]

執行代碼，運行結果如圖3.1所示。雖然在代碼中沒有設置title組件，但圖表仍然顯示一個默認標題，標題內容爲Chart title。同時，雖然設置副標題subtitle，但標題內容爲空，因此沒有副標題。

 

圖3.1  修改後的圖表

Highcharts標題的樣式

標題的內容爲文本形式。Highcharts默認對一些基本HTML標籤提供支持，如<b>、<br/>、<em>、<i>、<strong>。在文本中能夠直接使用這幾個基本標籤。

【實例3-2：titletext】爲實例1-1的標題加粗，修改代碼以下：

•                 title: {

•                     text: '<b>北京一週最高溫度</b>'                                  //使用加粗標籤

•                 },

執行後，效果如圖3.2所示。從圖中能夠明顯看出，標題被加粗了。

圖3.2  加粗的標題

雖然這五個標籤功能經常使用，可是功能有限。爲了擴展功能，title和subtitle都提供如下兩種方式。

1.HTML渲染useHTML

設置配置項useHTML後，能夠容許在標題文本中使用其餘HTML標籤。其語法以下：

• useHTML:Boolean

其中，參數Boolean爲布爾值，能夠爲true和false。默認值爲false，表示不支持使用其餘的HTML標籤。

2.設置標題樣式style

用戶也能夠指定標題文本所使用的CSS樣式。其語法形式以下：

• style:CSSObject

其中，參數CSSOjbect爲CSS樣式對象。默認值爲{"color": "#555555" }。

Highcharts標題的佈局方式

因爲標題位於圖表區內部，每每還在繪圖區的上面。因此，標題的佈局依賴於這二者。下面詳細講解標題的佈局方式。

1.標題相對圖表區的佈局

因爲標題區在圖表區內部，因此標題能夠以圖表區做爲標準，進行對齊。這時，須要使用title/subtitle的配置項align和verticalAlign。其語法以下所示：

• align:String1

• verticalAlign:String2

其中，參數String1表示水平對齊方式，值包括left、center、right，默認值爲center；參數String2表示垂直對齊方式，值包括top、middle、bottom。

【實例3-3：titlealign】設置實例1-1的標題在左下角顯示。修改代碼以下：

•                 title: {

•                     text: '北京一週最高溫度',

•                     align: 'left',                                          //設置水平左對齊

•                     verticalAlign:'bottom'                      //設置垂直底對齊

•                 },

執行後，效果如圖3.3所示。

圖3.3  設置標題的對齊方式

2.標題相對繪圖區的佈局

標題和繪圖區都位於繪圖區內部，標題能夠浮動在繪圖區上，也能夠不浮動。用戶能夠經過配置項floating設置是否浮動。其語法以下：

• floating:Boolean

其中，參數Boolean的值包括true和false。默認值爲false

【實例3-4：titlefloating】設置實例1-1的標題爲浮動方式，修改代碼以下：

•                 title: {

•                     text: '北京一週最高溫度',

•                     floating:true                                        //設置浮動方式

•                 },

執行代碼，效果如圖3.4所示。從圖中能夠看到，標題進入了繪圖區中。

圖3.4  設置標題的浮動方式

若是設置了配置項verticalAlign的值，默認啓用浮動方式。subtitle也能夠設置浮動方式。若是圖表同時包含標題和副標題，建議二者浮動方式統一，而且只在title中設置。不然，會形成兩個標題重合。當標題不設置浮動，能夠經過配置項margin設置標題和繪圖區的間距。其語法以下：

• margin:Number

其中，參數Number表示標題和繪圖區的間距，單位是px。默認值爲15。若是存在副標題，則間距爲Number+15。

【實例3-5：titlemargin】下面將實例1-1中的標題和繪圖區間距進行修改，修改代碼以下：

•                 title: {

•                     text: '北京一週最高溫度',

•                     margin: 100                                                           //設置間距爲100

•                 },

•                 subtitle: {

•                     text: '2015.02.08--2015.02.14'

•                 },

執行後，效果如圖3.5所示。從圖中能夠看出，標題距離繪圖區的距離是100px+15px。其中，15px是副標題和繪圖區的默認間距。

圖3.5  設置標題和繪圖區間距

3.標題的偏移位置

除了使用align和verticalAlign對齊外，標題和副標題還能夠基於對齊方式進行進一步的偏移。這一點與重置按鈕resetZoomButton相似。它也經過橫向偏移配置項x和縱向偏移配置項y實現。其語法以下：

• x:Number1

• y:Number2

其中，參數Number1表示橫行偏移距離的值，單位爲px，默認值爲0；參數Number2表示縱向偏移距離的值，單位爲px。

【實例3-6：titlexy】下面將實例1-1的標題位置進行偏移，修改代碼以下：

•                 title: {

•                     text: '北京一週最高溫度',

•                     align: 'left',                                          //設置橫向對齊方式

•                     x:100                                                    //設置橫向偏移距離

•                 },

執行後，效果如圖3.6所示。爲了方便觀察偏移位置，這裏設置顯示圖表邊框線。圖表區與內部的圖表元素原本左側默認有10px的間隔。設置標題橫向左對齊後，並設置偏移100px後，標題距離圖表區的左邊框距離爲100+10=110px。

圖3.6  標題的偏移位置

因爲副標題的設置效果與標題的設置效果等同，這裏再也不講解。

Highcharts版權信息

版權信息能夠幫助瀏覽者明確信息發佈者和權利所屬者。一般版權信息爲與右下角。咱們前面實例中右下角，都有Highcharts.com的版權信息比較，如圖3.7所示。

圖3.7  版權信息

Highcharts圖表的版權信息是由組件credits實現的。其語法以下：

• credits: {

•     //配置項

• }

下面講解常見的版權信息配置項。

Highcharts啓用版權信息

默認狀況下，顯示版權信息功能是開啓的。但不少時候，爲了節省圖表空間，須要禁用該功能。這時須要使用設置配置項enable。其語法以下：

• enabled: Boolean

其中，enabled的值類型爲布爾類型。若是值爲true，則顯示版權信息；若是爲false，則不顯示版權信息。默認值爲true。若是要禁用該功能，只須要將該配置項的值設置爲false便可。

【實例3-7：creditsenabled】下面禁止圖表的版權信息顯示。修改代碼以下：

•                 credits: {

•                     enabled:false                                               //禁止顯示版權信息

•                 }

Highcharts設置版權信息內容

默認圖表中的版權信息內容是Highcharts.com，而單擊後，會跳轉到Highcharts的官網http://www.highcharts.com/。對於開發者來講，這都是須要修改。用戶能夠經過配置項text和href來指定本身須要的版權信息。其語法以下：

• text: String1

• href: String2

其中，參數String1指定版權信息的文本內容，默認值爲Highcharts.com；參數String2指定版權信息的超連接網址，默認值爲http://www.highcharts.com/。

【實例3-8：textandhref】下面修改圖表默認的版權信息，修改代碼以下：

•                 credits: {

•                     text: '大學霸',                                                        //設置版權信息文本

•                     href:'http://daxueba.net'                           //設置版權信息的超連接

•                 }

執行後，運行結果如圖3.8所示。從圖中看到，版權信息已經修改成代碼所設置的信息了。

圖3.8  定製版權信息

Highcharts設置版權信息位置和樣式

除了能設置版權信息內容外，用戶還能夠設置版權信息顯示的位置和各類樣式。這時，須要使用配置項position和sytle。其語法以下：

• position: Object

• style: CSSObject

其中，參數Object指定版權信息顯示的位置信息，能夠包含的項以下：

q  align：表示水平對齊方式，值能夠爲left、center、right。默認值爲right。

q  verticalAlign：表示垂直對齊方式，值能夠爲top、center、bottom。默認值爲bottom。

q  x：表示水平偏移位置，單位爲px。默認值爲-10。

q  y：表示垂直偏移位置，單位爲px。默認值爲-5。

因此，參數Object的默認值爲

• {

•     align:'right',

•     verticalAlign:'bottom',

•     x:-10,

•     y:-5

• }

參數CSSObject指定版權信息的CSS樣式。默認值以下：

• {

•     cursor: 'pointer',

•     color: '#909090',

•     fontSize: '10px'

• }

本文選自：網頁圖表Highcharts實踐教程基礎篇大學霸內部資料，轉載請註明出處，尊重技術尊重IT人！