jquery - 钻取后 Highcharts 条形图缺失了一半

Question

我正在加载带有动态数据的条形图。单击任何条形图后，它会向下钻取由动态数据制成的折线图。问题是当我单击“后退”按钮时，条形图无法正确显示。它们切成两半，如image所示。但是当图表稍微滚动时，所有条形图都会很好地显示。 charts image按步骤顺序显示四个图表。

1. 当我单击一个条形图时，它会向下钻取到折线图。
2. 单击“后退”按钮后，会出现条形图，其中条形不完整。
3. 滚动时小条会正确显示。

以下是代码示例:

Highcharts.chart(div_id, {
    chart: {
        type: type,
        height: height,
        width: 800,
        inverted:true,
        events: {
            drilldown: function (e) {
                if (drill=="yes"){
                    if (!e.seriesOptions) {
                        var chart = this;
                        chart.inverted = false;
                        chart.showLoading('Loading ...');
                        var node=e.point.name.toLowerCase();
                        drill_ajax(x,y,z).done(function(r){
                            temp=r["dropdowns"];
                            dropdownlines=r["drilldownsLines"];
                            selected_valforpatdata=e.point.name.toLowerCase();
                            var seriesLine = dropdownlines[e.point.name];
                            var max_len=seriesLine.data.length;
                            var points = []
                                seriesLine.data.forEach(function (theData) {
                                    points.push(theData[1]);
                                });
                            chart.legend.update({enabled:true});
                            chart.xAxis[0].update({max:(max_len > 7) ? 7 : max_len-1});
                            chart.yAxis[0].update({
                                max: Math.max.apply(Math, points)
                            });
                            chart.addSingleSeriesAsDrilldown(e.point, seriesLine);
                            chart.applyDrilldown();
                            chart.hideLoading();
                        });

                    }
                }
            },
            drillup: function(e,x){
                var chart = this;
                chart.inverted = true;
                chart.legend.update({enabled:false});
                chart.xAxis[0].update({max:(data['category'].length > 7 ) ? 7 : (data['category'].length - 1)});
                var points = []
                this.series.forEach(function (entry) {
                    entry.data.forEach(function (theData) {
                        points.push(theData.y);
                    });
                });
                this.yAxis[0].update({
                    max: Math.max.apply(Math, points)
                });
            },
            load: function () {
                var points = []
                this.series.forEach(function (entry) {
                    entry.data.forEach(function (theData) {
                        points.push(theData.y);
                    });
                });
                this.yAxis[0].update({
                    max: Math.max.apply(Math, points)
                });
            }
        }
    },
    title: {
        text: ''
    },
    xAxis: {
        type: "category",
        allowDecimals: false,
        scrollbar: {
            enabled: true,
        },
        labels:{
            formatter: function () {
              var text = this.value,
                formatted = text.length > 20 ? text.substring(0, 20) + '...' : text;
                return '<div class="js-ellipse" title="' + text + '">' + formatted + '</div>';
            },
        },
        max:(data['category'].length > 7 ) ? 7 : (data['category'].length - 1), 
        min:0
    },
    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: y_text
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }],
    },
    tooltip: {
        footerFormat: '',
        shared: true,
        useHTML: true,
        backgroundColor: 'rgba(247,247,247,1)',
    },
    legend:{
        enabled:false
    },
    credits:{
        enabled:false
    },
    plotOptions: {
        color: "#53c68c",
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        },
        series: {
            name:titleCase(chart_for),
            stacking: 'normal',
            pointWidth: 20,
            color: barColor,
        },
    },
    series: [{
        title: title,
        data: data['data']
    }],

    drilldown: {
        series: []
    }
});

Answer 1

可以通过在plotOptions下将列动画设置为false来解决问题:

绘图选项:{
柱子: {
动画:假
}
}