изменить цвет меток данных на диаграмме HighCharts при наведении курсора без обновления серии - PullRequest
Новая
       28

изменить цвет меток данных на диаграмме HighCharts при наведении курсора без обновления серии

0 голосов
/ 01 мая 2019

Следующий код (составленный из ответа соответствующего вопроса) изменяет цвет линии в линейной диаграмме Highcharts при наведении курсора на ряд без использования более тяжелого метода series.update, но строки кода, которая должна измените также цвет текста меток данных не работает. Как мне достичь желаемого результата? 

Highcharts.chart('container', {
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true
            },
            states: {
                hover: {
                    enabled: false
                },
                inactive: {
                    enabled: false
                }
            },
            pointStart: 2010,
            events: {
                mouseOver: function() {
                    this.graph.attr({
                        stroke: "rgb(255,0,0)"
                    });
                    this.points.forEach(p => {
                            p.graphic.attr({
                                fill: "rgb(255,0,0)"
                            });

                            p.dataLabel.options.color="rgb(255,0,0)" 
                            //the above line is broken
                        }
                    );
                },
                mouseOut: function() {
                    this.graph.attr({
                        stroke: this.color
                    });
                    this.points.forEach(p => p.graphic.attr({
                        fill: this.color
                    }));
                }
            }
        },
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

});

на JSfiddle

1 Ответ

1 голос
/ 01 мая 2019

Чтобы изменить цвет метки данных, необходимо установить новый стиль заливки для текстового элемента метки, используя метод css().

Код: 

point.dataLabel.text.css({ fill: "rgb(255,0,0)" });

Демонстрация:

Справочник по API:

...