highchart自定義圖例

Question

我要定制highchart的圖例，以實現：

1. 會有點而不是線
2. 點的顏色和圖例文本的顏色將等於this.color
3. 在不可見狀態（點擊圖例）上，我想將顏色更改為highchart的默認選項（灰色）

這是我到目前為止的內容：

我做了什么：

legend: {
    useHTML: true,
    symbolWidth: 0,
    lableFormat: '<div>' +
                    '<div style="border-radius:50%; width: 10px; height:10px: background-color:{color}; display: inline-block; margin-right:5px"> </div>' +
                    "<span style='color:{color};font-family:proximaNovaBold'> {name} </span>"
                 '<div>',
}

我缺少的是：-單擊時，圖例不會將其顏色更改為默認的灰色

我一直在尋找不可見狀態的Legend-labelFormat之類的東西，但是我在highchart的文檔中找不到它（順便說一句確實很好），還有其他方法可以實現嗎？

Answer 1

我找到了答案，但並非如我所願：

我將事件偵聽器plotOptions.series.events.legendItemClick，chart.legend.update和legend.labelFormatter與外部變量一起使用

外部變量：

var legendsStatus = {};

使用labelFormatter的自定義圖例：

legend :{
                        useHTML: true,
                        symbolWidth: 0,
                        labelFormatter: function () {
                                     return '<div>' +
                                                '<div style="border-radius: 50%; width: 10px; height: 10px; background-color: ' + this.color +'; display: inline-block; margin-right:5px"> </div>' +
                                                "<span style='color:" + this.color + "; font-family:proximaNovaBold'> " + this.name +  " </span>" +
                                            '</div>'
                                 }

                    },

使用chart.legend.update的事件偵聽器：

plotOptions: {
    series: {
        marker: {
            enabled: false
        },
        events : {
            legendItemClick : function(){

                legendsStatus[this.name] = this.visible;

                this.chart.legend.update( {
                    useHTML: true,
                    symbolWidth: 0,
                    labelFormatter: function () {

                                // legend status = visible
                                if (!legendsStatus[this.name])
                                     return '<div>' +
                                                '<div style="border-radius: 50%; width: 10px; height: 10px; background-color: ' + this.color +'; display: inline-block; margin-right:5px"> </div>' +
                                                "<span style='color:" + this.color + "; font-family:proximaNovaBold'> " + this.name +  " </span>" +
                                           '</div>'

                                // legend status = invisible
                                return '<div>' +
                                           '<div style="border-radius: 50%; width: 10px; height: 10px; background-color: #cccccc; display: inline-block; margin-right:5px"> </div>' +
                                           "<span style='color: #cccccc; font-family:proximaNovaBold'> " + this.name +  " </span>" +
                                      '</div>'
                             }
                });


            }
        }
    }
},