圖例是圖表中用不同形狀、顏色、文字等 標(biāo)示不同數(shù)據(jù)列，通過點(diǎn)擊標(biāo)示可以顯示或隱藏該數(shù)據(jù)列；通過設(shè)置 legend.enabled = true | false 來打開或關(guān)閉圖例。

一、圖例樣式

1、圖例容器樣式

圖例容器指的是整個(gè)圖例容器的樣式，包含背景、邊框、邊距、寬度等，詳細(xì)屬性及說明見下表

2、圖例項(xiàng)樣式

上面說到了圖例容器的樣式可以控制圖例整體樣式，對(duì)應(yīng)配置圖例里的內(nèi)容是通過圖例項(xiàng)相關(guān)屬性來控制的，見下表

二、圖例內(nèi)容及定位

1、圖例內(nèi)容

關(guān)于格式化函數(shù)及格式化字符串這里簡(jiǎn)單說明如下：

labelFormatter: function() {
   /*
    *  格式化函數(shù)可用的變量：this， 可以用 console.log(this) 來查看包含的詳細(xì)信息
    *  this 代表當(dāng)前數(shù)據(jù)列對(duì)象，所以默認(rèn)的實(shí)現(xiàn)是 return this.name 
    */
    return  this.name + '(Click to hide or show)';  

	}  

labelFormat 格式化字符是格式化函數(shù)的一種簡(jiǎn)寫方式，即用包含變量的字符串代替函數(shù)。

對(duì)于上面格式話函數(shù)的代碼，完全可以用更簡(jiǎn)潔的方式實(shí)現(xiàn)：

labelFormat: '{name} (Click to hide or show)'; 

2、定位

下面是圖例位置的確定的一些配置

三、圖例事件

圖例默認(rèn)的點(diǎn)擊行為是顯示或隱藏當(dāng)前數(shù)據(jù)列。

plotOptions: {
  series: {
    events: {
        legendItemClick: function(e) {
            /*
             * 默認(rèn)實(shí)現(xiàn)是顯示或隱藏當(dāng)前數(shù)據(jù)列，e 代表事件， this 為當(dāng)前數(shù)據(jù)列
             */
        }
    }
  }
} 

禁用圖例點(diǎn)擊隱藏效果

plotOptions: {
  series: {
    events: {
        legendItemClick: function(e) {
            return false; // 直接 return false 即可禁用圖例點(diǎn)擊事件
        }
    }
  }
} 

上述代碼對(duì)餅圖是無效的，API給出的說明如下

Not applicable to pies, as the legend item is per point. See point.events.

也就是對(duì)于餅圖對(duì)應(yīng) legendItemClick 事件是 point.legengItemClick。

plotOptions: {
  pie: {
    point: {
        events: {
            legendItemClick: function(e) {
                return false; // 直接 return false 即可禁用圖例點(diǎn)擊事件
            }
        }
    }
  }
}

改變圖例點(diǎn)擊默認(rèn)響應(yīng)（默認(rèn)是點(diǎn)擊某個(gè)圖例顯示或隱藏當(dāng)前數(shù)據(jù)列，這里改變?yōu)辄c(diǎn)擊某個(gè)圖例只顯示當(dāng)前數(shù)據(jù)列，隱藏其他數(shù)據(jù)列）

plotOptions: {
    series: {
        events: {
            legendItemClick: function(e) {
                var index = this.index;

                var series = this.chart.series;

                if (!series[index].visible) {

                    for (var i = 0; i < series.length; i++) {

                        var s = series[i];

                        i === index ? s.show() : s.hide();
                    }
                }

                return false;
            }
        }
    }
} 

點(diǎn)擊下載最新版 Highcharts

如果你想提供任何產(chǎn)品反饋，。

購買最新版Highcharts<>，即可擁有最新正版授權(quán)!