圖例是圖表中用不同形狀、顏色、文字等 標示不同數據列，通過點擊標示可以顯示或隱藏該數據列；通過設置 legend.enabled = true | false 來打開或關閉圖例。

一、圖例樣式

1、圖例容器樣式

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

2、圖例項樣式

上面說到了圖例容器的樣式可以控制圖例整體樣式，對應配置圖例里的內容是通過圖例項相關屬性來控制的，見下表

二、圖例內容及定位

1、圖例內容

關于格式化函數及格式化字符串這里簡單說明如下：

labelFormatter: function() {
   /*
    *  格式化函數可用的變量：this， 可以用 console.log(this) 來查看包含的詳細信息
    *  this 代表當前數據列對象，所以默認的實現是 return this.name 
    */
    return  this.name + '(Click to hide or show)';  

	}  

labelFormat 格式化字符是格式化函數的一種簡寫方式，即用包含變量的字符串代替函數。

對于上面格式話函數的代碼，完全可以用更簡潔的方式實現：

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

2、定位

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

三、圖例事件

圖例默認的點擊行為是顯示或隱藏當前數據列。

plotOptions: {
  series: {
    events: {
        legendItemClick: function(e) {
            /*
             * 默認實現是顯示或隱藏當前數據列，e 代表事件， this 為當前數據列
             */
        }
    }
  }
} 

禁用圖例點擊隱藏效果

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

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

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

也就是對于餅圖對應 legendItemClick 事件是 point.legengItemClick。

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

改變圖例點擊默認響應（默認是點擊某個圖例顯示或隱藏當前數據列，這里改變為點擊某個圖例只顯示當前數據列，隱藏其他數據列）

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;
            }
        }
    }
} 

點擊下載最新版 Highcharts

如果你想提供任何產品反饋，。

購買最新版Highcharts<>，即可擁有最新正版授權!