Question

我正在加载带有动态数据的条形图。在单击任何条形图时，它会向下钻取到由动态数据构成的折线图。问题是，当我单击“返回”按钮时，条形图显示不正确。如image所示，它们减少了一半。但是当图表滚动一点时，所有条形图都会很好地显示。charts image按顺序显示四个图表。

当我点击一个条形图时，它会向下钻取到折线图。
单击“返回”按钮时，条形图显示为不完整的条形。
滚动时，小条显示正确。

以下是代码示例：

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来解决问题

plotOptions: { column: { animation:false } }

钻井后，Highcharts酒吧有一半缺失

1 个答案: