Кнопка "Назад" не работает на круговой диаграмме детализации - PullRequest
Новая
       22

Кнопка "Назад" не работает на круговой диаграмме детализации

0 голосов
/ 26 апреля 2019

Здесь я использую библиотеку highcharts для создания круговой диаграммы детализации, я использовал событие щелчка для фильтрации и детализацию для обратной фильтрации, но у меня это не работает, кто-нибудь проверяет это для меня ..?

Здесьподелились некоторыми из моего кода:

Функция создания диаграммы 

createChart(chartData) {

    this.chartData = chartData;
    let currencySign = this.currencySign;

    let options = {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie',
            // backgroundColor: bgColor
        },
        title: {
            text: '',
        },
        plotOptions: {
            pie: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
                cursor: 'pointer',
                events: {}
            }
        },
        series: [{
            name: "Plant Types",
            id: "plant_types",
            data: chartData.series
        }],
        tooltip: {
            formatter: function() {
                let title = this.series.name;
                if(title == 'Products') {
                    title += " ("+ this.point['rate_unit'] + ")";
                }

                let pointcolor = this.point.color;
                let pointName = this.point.name;
                let pointY = numeral(this.point.y).format('0,0');
                let pointPercentage = numeral(this.point.percentage).format('0,0.00');
                let pointTotal = numeral(this.point.total).format('0,0');
                return '<span style="font-size:11px">'+title+'</span><br><span style="color:'+pointcolor+'">'+pointName+':</span> '+currencySign+'' + pointY +'<b>('+pointPercentage+'%)</b><br/>Total: '+currencySign+''+pointTotal;
            }
        },
        drilldown: {
            series: []
        }
    };

    options['plotOptions']['pie']['events'] = this.chartClickHandler();

    // set theme options if dark theme enabled.
    if(this._localStorageService.getIsDarkTheme()) {
        Highcharts['theme'] =  this._chartThemeOptions.getSearchScreenDarkThemeOptions();
        Highcharts.setOptions(Highcharts['theme']);
    }

    this.chart = new Chart(options);
}

Метод обработчика событий 

chartClickHandler() {

    let clickObj = {
        click: (e) => {

            let userOptions = e.point.series.userOptions;
            let key = "";

            if(userOptions['id'] == "plant_types") {
                this.chart.ref.showLoading('Loading Technologies...');
                this.loadTechnologyByPlantType(e.point);
                key = "plant_plant_type";

            } else if (userOptions['id'] == "technologies") {
                this.chart.ref.showLoading('Loading Prime Movers...');
                this.loadPrimeMoversByTechnologies(e.point);
                key = "generator_technology";

            } else if (userOptions['id'] == 'prime_movers') {
                let nameArr = (e.point.name).split(' - ');
                let primeMoverCode = nameArr[0];
                key = "prime_mover";
            }

            let filterData = {
                type: key,
                selectedValues: e.point.name
            };

            this.onSelectFilter.emit(filterData);
        },

        drillUp: (e) => {
            console.log("revert event");
        }
    };

    return clickObj;
}

ifСобытие детализации не используется для возврата, тогда какое событие используется для отмены какого-либо предложения?

...