highchart настроить легенду

Я хотел бы настроить легенду о highchart, чтобы добиться:

  1. Вместо линий будут точки
  2. Цвет точек и цвет текста легенды будут равны this.color
  3. в невидимом статусе (легенда onclick) я хотел бы изменить цвет на параметр 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 (кстати, действительно хороший), есть ли другой способ сделать это?


javascript highcharts highcharts-ng
person dan    schedule 19.09.2017    source источник
comment
В следующий раз, когда вы захотите опубликовать фрагмент своего кода, пожалуйста, не загружайте его в виде изображения.   -  person George    schedule 19.09.2017
comment
Как насчет использования свойства объекта itemHiddenStyle (api.highcharts.com/highcharts/legend.itemHiddenStyle )? Если это не поможет, предоставьте нам рабочий пример.   -  person pawel_d    schedule 20.09.2017
comment
itemHiddenStyle не работает...   -  person dan    schedule 24.09.2017

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел ответ, но это было не так просто, как я надеялся:

Я использовал прослушиватель событий 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>'
                             }
                });


            }
        }
    }
},
person dan    schedule 24.09.2017