網頁圖表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標籤提供支援，如、
、、、。在文字中可以直接使用這幾個基本標籤。

【例項3-2：titletext】為例項1-1的標題加粗，修改程式碼如下：

•                 title: {

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

•                 },

執行後，效果如圖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的官網。對於開發者來說，這都是需要修改。使用者可以透過配置項text和href來指定自己需要的版權資訊。其語法如下：

• text: String1

• href: String2

其中，引數String1指定版權資訊的文字內容，預設值為Highcharts.com；引數String2指定版權資訊的超連結網址，預設值為。

【例項3-8：textandhref】下面修改圖表預設的版權資訊，修改程式碼如下：

•                 credits: {

•                     text: '大學霸',                                                        //設定版權資訊文字

•                     href:''                           //設定版權資訊的超連結

•                 }

執行後，執行結果如圖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人！