Переменная Highcharts pie legendItemClick не скрывает и не обновляет данные - PullRequest
Новая
       7

Переменная Highcharts pie legendItemClick не скрывает и не обновляет данные

0 голосов
/ 10 сентября 2018

В настоящее время я работаю с круговой диаграммой переменной HighCharts.Я хотел добавить больше функциональности к щелчку легенды, поэтому я добавил отдельное событие legendItemClick, чтобы выполнить две вещи: оно должно вести себя как значение по умолчанию (чего нет), но также корректировать текстовое значение внутри пончика, что также делаетне работает.

Вот код, с которым можно работать: 

            this._chart = Highcharts.chart(this.$.chartsContainer, {
                title: {
                    text: '<div style="font-size: 30px; font-weight:600;">' + ySum + '</div><div>Total demands</div>',
                    align: 'center',
                    verticalAlign: 'middle',
                    useHTML: true,
                    style: {
                        'font-size': '16px',
                        'font-weight': 'normal',
                        'text-align': 'center',
                        'text-transform': 'inherit'
                    },
                    x: -2,
                    y: -27,
                },
                colors: ['#315674', '#006281', '#006D81', '#00BFE2', '#53A1B4', '#4FB4B5', '#00E8D2', '#FFC35F', '#9ECBD6'],
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: false },
                        showInLegend: true,
                        style: {'border-radius': '15px', 'font-weight': 'normal'},

                    },
                    variablepie: {
                        name: '',
                        borderWidth: 5, borderColor: 'white', minPointSize: 16,
                        color: 'white', innerSize: '60%',
                        point: {
                            events: {
                                legendItemClick: function(event) {
                                    console.log(event);
                                    if (this.visible) {
                                       this.series.visible = false;
                                        ySum = ySum - event.target.options.y;
                                    } else {
                                        ySum = ySum + event.target.options.y;
                                    }
                                }
                            }
                        }
                    },
                },
                tooltip: {
                    useHTML: true,
                    headerFormat: '<small>{point.y}</small><table>',
                    pointFormat: '',
                    footerFormat: ''
                },
                series: [{
                    type: 'variablepie',
                    data: ySerie,
                },
                ]
            });
            this.reflowChart();

Я пытался скрыть данные серии кликов через атрибут visible, но это не работает должным образом, потому что он скрывает кликданные, но не перерисовывает диаграмму, чтобы снова сформировать полный круг (если вы знаете, о чем я говорю).

Вторая проблема - заголовок текста.Я хочу, чтобы он показал новое исправленное значение (это переменная ySum внутри заголовка: {text: block).Я попытался установить новое значение, но по какой-то причине он не обновляет данные графика.Например, у нас есть 3 слайса со значением 10 каждый.Это показывает "30 всего".Когда 1 элемент легенды щелкается и скрывается, он должен обновить ySum, чтобы теперь отображать «всего 20».

Короче говоря, мне нужна помощь с 1) Как правильно скрыть и отобразить данные серии щелчков легенды 2) Сделатьтекстовый атрибут ySum обновляет свое значение соответственно

Спасибо за помощь!

------------------- ОБНОВЛЕНИЕ -----------------

Я сам разобрался с первой проблемой (тем не менее, я оставлю эту проблему, если кто-то еще столкнется с ней): событие legendItemClick - это функция, которая может возвращатьлогическое значение: вы можете манипулировать его поведением, установив true = стандартное поведение -> оно будет скрывать ряд данных и перерисовывать диаграмму false = оно ничего не будет делать -> похоже на event.preventDefault ()

1 Ответ

0 голосов
/ 10 сентября 2018

Для изменения названия диаграммы вы можете использовать метод setTitle: 

    legendItemClick: function(event) {
      var chart = this.series.chart

      if (this.visible) {
        // this.series.visible = false;
        ySum = ySum - event.target.options.y;
      } else {
        ySum = ySum + event.target.options.y;
      }
      chart.setTitle({
        text: ySum
      }, false, false);

      return true
    }

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Chart#setTitle

Живая демоверсия: https://jsfiddle.net/BlackLabel/sdh1y0tw/

...