Highmaps網頁圖表教程之繪圖區顯示標籤顯示數據標籤訂位

Highmaps網頁圖表教程之繪圖區顯示標籤顯示數據標籤訂位

Highmaps數據標籤訂位

因爲數據標籤是和節點一一對應，因此數據標籤是依據節點位置進行定位的。本節詳細講解如何對數據標籤進行定位。

Highmaps節點定位

在mappoint、mapbubble、mapline圖表類型，節點都有明確位置。而在map圖表類型中，節點對應的是一個區域。因此，map圖表類型的節點中心位置就能夠由用戶來設定。設置時候須要使用到如下兩個配置項：

middleX: Number1

middleY: Number2

其中，參數Number1指定節點中心在水平方向的位置，值的範圍爲0~1。0表示節點對應區域的最左端，1表示最右端；默認值爲0.5。參數Number2指定節點中心在垂直方向的位置，值的範圍爲0~1。0表示區域的最頂端，1表示最底端；默認值爲0.5。

Highmaps對齊定位

在節點肯定後，用戶就能夠設置數據標籤相對節點的水平和垂直對齊方式了。下面依次講解這兩種方式：

（1）使用配置項align設置水平對齊方式。其語法以下：

• align: String

其中，參數String指定水平的對齊方式，容許的值包括left、center、right，默認值爲center。例如，若是用戶設置爲left，就表示數據標籤的左端和節點對齊。

（2）使用配置項verticalAlign設置垂直對齊方式。其語法以下：

• verticalAlign:String

其中，參數String指定垂直的對齊方式，容許的值包括top、middle、bottom，默認值爲middle。若是用戶設置爲top，就表示數據標籤的頂端和節點對齊。

Highmaps節點偏移

數據標籤相對節點定位後，用戶還能夠對其位置進行必定的偏移。這時須要使用到如下兩個配置項。

（1）使用配置項x設置水平偏移距離，其語法以下：

• x: Number

其中，參數Number指定水平偏移位置，單位爲px，默認值爲0。

（2）使用配置項y設置垂直偏移距離，其語法以下：

• y: Number

其中，參數Number指定垂直偏移位置，單位爲px，默認值爲1。

【實例4-6：dataLabelsposition】下面對節點位置進行設置。核心代碼以下：

•                 series: [{

•                     dataLabels: {

•                         enabled: true,

•                         color:'red',

•                         middleX: 0.5,                                        //設置節點中心的水平位置

•                         middleY: 0.5,                                        //設置節點中心的垂直位置

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

•                         verticalAlign: 'top',                                //設置垂直對齊方式

•                         x: 0,                                                         //設置水平偏移距離

•                         y:0                                                           //設置垂直偏移距離

•                     },

•                 }],

執行代碼後，效果如圖4.6所示。

圖4.6  從新設置數據標籤的位置

Highmaps標籤框架

標籤文本外圍就是標籤框架。Highmaps容許用戶定義框架的顏色，填充色和邊框。下面依次講解幾項。

1.邊框

邊框是標籤框架的輪廓。默認狀態下，邊框線寬爲爲0，因此看不到邊框。用戶能夠設置邊框的如下三個方面：

• q  邊框顏色：borderColor: Color

• q  邊框圓角：borderRadius: Number1

• q  邊框線寬：borderWidth: Number2

其中，參數Color指定邊框的顏色；參數Number1指定邊框的圓角半徑，單位爲px，默認值爲0；參數Number2指定邊框的線寬，單位爲px，默認值爲0

2.形狀

默認狀態下，邊框的形狀爲矩形square。用戶能夠根據須要，使用配置項shape從新指定。其語法以下：

• shape: String

其中，參數String指定邊框形狀，容許的值包括circle（圓形）、diamond（菱形）、square（矩形）、triangle（三角形）、triangle-down（倒三角形）。默認值爲square。

3.背景色

爲了凸顯數據，用戶使用配置項backgroundColor還能夠設置邊框的填充顏色。其語法以下：

• backgroundColor: Color

其中，參數Color指定填充色顏色。

【實例4-7：dataLabelsborder】下面指定數據標籤框架樣式。核心代碼以下：

•                 series: [{

•                     dataLabels: {

•                         borderWidth: 2,                                            //設置邊框線寬

•                         borderColor: 'black',                                            //設置邊框顏色

•                         shape: 'circle',                                                       //設置邊框形狀

•                         backgroundColor:'black'                                    //設置填充顏色

•                     },

•                 }],

執行代碼後，效果如圖4.7所示。

圖4.7  設置數據標籤邊框

Highmaps標籤顯示模式

標籤陰影

當用戶爲標籤添設置邊框線寬度或者填充顏色後，還能夠爲標籤設置陰影效果。設置標籤陰影須要藉助shadow配置項。其語法以下：

• shadow: Boolean|Object

該配置型的值能夠爲布爾類型，也能夠是對象類型。當值爲false時，表示禁用陰影效果；當值爲true時，啓用陰影效果。當值爲對象時，用戶能夠設置陰影的具體效果。其結構以下：

• {

•     color:Color,

•     offsetX:Number1,

•     offsetY:Number2,

•     opacity:Number3,

•     width:Number4

• }

其中，參數Color指定陰影的顏色；參數Number1和Number2指定陰影的水平和垂直偏移距離，單位爲px；參數Number3指定陰影的透明度，值爲0~1之間；參數Number4指定陰影的寬度，單位爲px。

Highmaps超出繪圖區顯示

當節點元素接近繪圖區邊緣時，節點對應的數據標籤每每會超出繪圖區範圍。默認狀態下，Highmaps會自動調整數據標籤的位置。若是調整後，仍然超出繪圖區，則不顯示該數據標籤。爲了不這種狀況，用戶能夠手動設置顯示模式，避免數據標籤位置的調整和捨棄。這時須要使用如下兩個配置項。

（1）使用配置項overflow設置標籤的浮動模式。其語法以下：

• overflow: String

其中，參數String指定浮動模式類型，容許的值爲justify和none。當值爲justify時，Highmaps會根據狀況自動調整數據標籤位置；當值爲none時，則禁用Highmaps的自動調整。

（2）使用配置項crop設置是否捨棄超出範圍的數據標籤。其語法以下：

• crop: Boolean

該配置型的值爲布爾類型。當值爲true時，會捨棄超出繪圖區的數據標籤；當值爲false，則顯示所有的數據標籤。

Highmaps繪圖區內顯示

在繪圖區內顯示時，數據標籤不只涉及和其餘元素的層疊問題，還涉及多個數據標籤之間互相層疊問題。下面依次講解這兩個問題。

1.和其餘元素的層疊

若是數據標籤被其餘圖表元素覆蓋，這時能夠經過設置數據標籤的配置項zIndex來調整。其語法以下：

• zIndex: Number

其中，參數Number指定層疊順序值，默認值爲6。值越大，顯示越靠上。

2.標籤之間的層疊

當地圖區域不少時，各個區域的數據標籤很容易發生層疊問題。因爲同屬一類元素，因此經過zIndex沒法進行設置。這時候，用戶可使用數據節點配置項data提供的子配置項labelrank來設置。其語法以下：

• labelrank: Number

其中，參數Number指定該節點對應的數據標籤顯示優先級。數值越大，優先級越高，越顯示在上層。不一樣優先級的數據標籤發生層疊後，低優先級的數據標籤會被隱藏。

若是用戶只但願覆蓋，而不但願發生隱藏，能夠設置配置項allowOverlap。其語法以下：

• allowOverlap: Boolean

該配置項的值爲布爾類型。當值爲true時，容許數據標籤重疊，而不隱藏；當值爲false時，則不容許重疊。

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