Question

我在项目中使用Highchart。我使用AJAX创建了一个向下钻取图表。但现在我想创建一个更改图表类型的按钮，但图表保持在当前的向下钻取状态，不需要重新加载。

function createBarDiagram(div,first,second,type,ytitle,title){

    Highcharts.setOptions({lang: {drillUpText: '◁ Terug naar {series.name}'}});

    if(type == 'pie'){
        var options1 = {                        
            tooltip: {pointFormat: 'Percentage: <b>{point.percentage:.1f}%</b><br>'},       
            xAxis: {categories: true}
        };
    }

    if(type == 'column'){
        var options1 = {
            tooltip: {
                pointFormat: 'Totaal: <b>{point.total}</b><br>'+
                                   'Geel: <b>{point.1}</b><br>'+
                                   'Grijs: <b>{point.2}</b><br>',
                followPointer:true
                                   },
            xAxis: {
                categories: true,
                labels : { rotation: -90}
            }
        };  
    }

    var options = {
        yAxis: {title: {text: ytitle}},     
        chart: {height: 400,
            events: {
                drilldown: function(event) {

                    if (!event.seriesOptions) {

                        // save drilldown status
                        drilldown.push(event.point.name);
                        depth++;                        

                        // show public that the chart is loading by AJAX request
                        chart.showLoading('Laden ...');

                        // array for drilldown data
                        var drilldowndata = new Array;

                        var beginmaand = getStartOrEindmaand('start');
                        var eindmaand = getStartOrEindmaand('eind');
                        var jaar = $('select[name=jaar] option:selected').val();                    
                        var geel = $('input[name="geel"]').prop('checked');                     
                        var grijs = $('input[name="grijs"]').prop('checked');   

                        // get data based on drilldown
                        $.ajax({
                            type: "POST", 
                            async:false,
                            data:{drilldown:drilldown,type:drilldown[0],beginmaand:beginmaand,eindmaand:eindmaand,jaar:jaar,start:start,end:end,geel:geel,grijs:grijs},
                            url:base_url+'wagenparkoverzicht/getdrilldowndata/',
                            success: function(data){

                                // save the data in global array variabele
                                drilldowndata =  JSON.parse(data);                      

                            }
                        });

                        chart.hideLoading();
                        chart.addSeriesAsDrilldown(event.point, drilldowndata); 

                        // show breadcrump
                        var breadcrump = makeBreadCrump();
                        $('#'+div+'_breadcrump').html('('+breadcrump+')');                      
                    }
                },
                drillup: function(event) {
                    depth--;
                    drilldown.splice(depth,1);                                  
                }
            }},
        title: {text: title},
        //drilldown: {series: second},
        drilldown: {
            series: []
        },
        legend: {enabled: false},
        credits: {enabled: false},
        plotOptions: {
            series: {
                dataLabels: {enabled: true},
                shadow: false,
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() { getDetailData(this);}
                    }
                }               
            },
            pie: {size: '70%'}
        },
        series: [{
            name: 'overzicht',
            colorByPoint: true,
            data: first
        }]  
    };  

    options = jQuery.extend(options, options1);
    options.chart.renderTo = div;
    options.chart.type = type;
    var chart = new Highcharts.Chart(options);
    return chart;

}

---编辑---

我找到了一些可以在这个小提琴中起作用的例子（http://jsfiddle.net/tccpT/）。使用它时，图表在列之间变化很好，但是当我点击更深处而不是单击返回时，图表会显示错误或显示两个图表。 1列和馅饼..？

function changeType(series, newType) {
    var dataArray = [],
        points = series.data;

    series.chart.addSeries({
        type: newType,
        name: series.name,
        color: series.color,
        data: series.options.data
    }, false);

    series.remove();
}

$('#toolbar button').click(function(){
    charttype = $(this).attr('type');
    var series = first.series[0],
      newType = charttype;
    changeType(series, newType);
});

Answer 1

使用series.update()，如下所示：http://jsfiddle.net/VEaLz/

$("#button").click(function() {
        $("#container").highcharts().series[0].update({ type: 'column' });
});

Highchart在深入分析中更改图表类型

1 个答案: