Highcharts - изменение цвета только выбранной колонки

Question

Highcharts - изменение цвета только выбранной колонки

У меня есть гистограмма, сделанная с использованием Highcharts.JS. При щелчке на панели ее цвет меняется на оранжевый. Но когда щелкается другой бар, цвет ранее нажатого бара остается оранжевым.

Я хочу, чтобы при щелчке бара цвет всех других баров стал по умолчанию.

 $('#container').highcharts({

    chart: {

        type: 'column'

    },

    xAxis: {

        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

    },



    plotOptions: {

        series: {

            point: {

                events: {

                    click: function(event) {

                        console.log(this);

                        this.update({ color: '#fe5800' }, true, false);

                        }

                }

            }

        }

    },



    series: [{

        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }]

});

Fiddle link - Demo .

Заранее благодарю.

542 3

jQuery javascript html5

3 ответов:

Comments

Ничего не найдено.

Dave · Accepted Answer · 2014-05-09 12:13:51

Jsfiddle

var series = chart.series[0];
series.color = "#FF00FF";
chart.legend.colorizeItem(series, series.visible);
$.each(series.data, function(i, point) {
    point.graphic.attr({
        fill: '#FF00FF'
    });
});
series.redraw();

sweetamylase · Accepted Answer · 2014-05-09 12:01:58

Можно сохранить ссылку на предыдущий бар, а при нажатии на следующий бар можно восстановить цвет предыдущего бара.

$(function () {
    var previousPoint = null;
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                point: {
                    events: {
                        click: function(event) {
                            console.log(this);
                            if (previousPoint) {
                                previousPoint.update({ color: '#7cb5ec' });
                            }
                            previousPoint = this;
                            this.update({ color: '#fe5800' });
                            }
                    }
                }
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });

});

См. http://jsfiddle.net/amyamy86/Xm4vW/1/

neric · Accepted Answer · 2017-04-03 15:59:27

Обновление в 2017 году:

Теперь есть встроенный способ сделать это:
 series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2, -1, -2, -3],
        color: 'steelblue',
        negativeColor: 'indianred',
        states: {
            select: {
                color: 'blue'
            }
        },
        allowPointSelect: true
    }]
Скрипка: http://jsfiddle.net/nk1v22du/