“后退”按钮在细分饼图上不起作用

时间:2019-04-26 08:53:13

标签: angularjs laravel highcharts arcgis

在这里,我正在使用highcharts库创建向下钻取的饼图,我已经使用click事件进行过滤,并使用了向上钻取来进行反向过滤,但是任何人都不能对我进行检查。.

这里分享了我的一些代码:

创建图表功能

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;
}

如果未使用向上追溯事件进行还原,那么哪个事件用于还原任何建议?

0 个答案:

没有答案