Можете ли вы показать / скрыть серии в диаграммах солнечных лучей? - PullRequest
Новая
       26

Можете ли вы показать / скрыть серии в диаграммах солнечных лучей?

0 голосов
/ 22 ноября 2018

Можете ли вы использовать выбираемые серии с диаграммой солнечных лучей так же, как вы можете использовать серии на диаграмме x-диапазона?На диаграмме x-диапазона серии могут быть выбраны / отменены (показаны / скрыты).Можете ли вы сделать что-то подобное в таблице солнечных лучей?Каким-то образом группировать точки данных?

Пример показанных / скрытых рядов на диаграмме x-диапазона: http://jsfiddle.net/02Lqotd7/

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['Prototyping', 'Development', 'Testing'],
        reversed: true
    },
    series: [{
        name: 'Project 1',
        // pointPadding: 0,
        // groupPadding: 0,
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.25
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }],
        dataLabels: {
            enabled: true
        }
    },{
        name: 'Project 2',
        // pointPadding: 0,
        // groupPadding: 0,
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.25
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }],
        dataLabels: {
            enabled: true
        }
    }]

});

1 Ответ

0 голосов
/ 23 ноября 2018

Прежде всего, есть только одна серия в sunburst типе диаграммы, поэтому, чтобы скрыть / показать ту часть графика, которая вам нужна, чтобы скрыть / показать точки.Однако эта функция по умолчанию не поддерживается и требует некоторой настройки.

Самое простое решение - использовать метод setVisible из типа pie series и внутренний параметр legendType: 'point'.Затем спрячьте ненужные элементы легенды в событии afterGetAllItems. 

var H = Highcharts;

H.seriesTypes.sunburst.prototype.pointClass.prototype.setVisible = H.seriesTypes.pie.prototype.pointClass.prototype.setVisible

H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
    e.allItems.splice(1, 1);
    e.allItems.splice(2, 1);
});

В конце осталось обработать событие point legendItemClick - вы можете использовать метод point update, чтобы установить value: null для скрытых точек: 

    point: {
        events: {
            legendItemClick: function() {
                this.series.points.forEach(function(el) {
                    if (el.color === this.color) {
                        el.update({
                            oldValue: el.value ? el.value : el.oldValue,
                            value: el.value ? null : el.oldValue
                        }, false);
                    }
                }, this);

                this.series.chart.redraw();
            }
        }
    }

Демонстрационная версия: http://jsfiddle.net/BlackLabel/8cLp17of/

API: https://api.highcharts.com/class-reference/Highcharts.Point#update

...