Highchart 在调整大小时消失并且不占用父宽度

Question

我实际上是在包含一些统计信息的页面中工作，但我遇到了关于 highcharts 的问题。我在互联网上搜索解决方案已经 2 小时了，但没有找到任何解决方案。

第一个问题，我使用 bootstrap 3，所以我的容器是 col-xs-6 宽的。在我的文档中，这大约是 350 像素宽。图表保持在 600px 宽处呈现。

我当然找到了reflow()方法，当我在FF的控制台中手动执行它时它可以工作，但我试图这样执行它并不起作用。

function getContents(courses, user) {
    $.ajax({
        url: BeginUrl + 'analyse/get/content',
        type: "post",
        data: {courses: courses, user_id: user},
        beforeSend: function (request) {
            return request.setRequestHeader('X-CSRF-Token', $('meta[name="_token"]').attr('content'))
        },
        error: function (data) {
            swal("Oops", data.error.message, "error");
        },
        success: function (data) {
            if (data.success) {
                //update bar about content
                $('#hero-bar').html('');
                $('#hero-bar').highcharts({
                    chart: {
                        renderTo: 'hero-bar',
                        type: 'column',
                        events:{
                            load: function() {
                                this.reflow();
                            }
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    legend: {
                        enabled: false
                    },
                    title: {
                        text: null
                    },
                    xAxis: {
                        categories: data.contents.categories,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: ''
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:12px">{point.key}</span><table>',
                        pointFormat: '<tr>' +
                        '<td style="padding:0"><b>{point.y}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.1,
                            borderWidth: 0
                        }
                    },
                    series: data.contents.series
                });
            }
        },
        complete: function() {
            $('#loader-content-box').fadeOut(400, function(){
                $('#content-box').fadeIn(400);
            });
        }
    });
}

我在构建图表时尝试了事件参数，并在 ajax 中手动尝试“完成”：$('#hero-bar').highcharts().reflow();

当然，两者都不起作用....在控制台中手动时，它起作用了。我想这与图表的加载和渲染有关，但即使在似乎在图表渲染之后执行的事件加载也不起作用。当然，我可以为宽度设置一个固定值，但我需要它来响应。

第二个问题肯定与第一个问题有关，当我调整窗口大小时，我的图表中的 2 个会像我调用 destroy 方法一样消失...不再有 <rect> 或容器中的任何内容。前面的例子和下面的例子就是这样做的：

function getDeployement(courses, user) {
    $.ajax({
        url: BeginUrl + 'analyse/get/deployement',
        type: "post",
        data: {courses: courses, user_id: user},
        beforeSend: function (request) {
            return request.setRequestHeader('X-CSRF-Token', $('meta[name="_token"]').attr('content'))
        },
        error: function (data) {
            swal("Oops", data.error.message, "error");
        },
        success: function (data) {
            if (data.success) {
                //update bar line
                $('#hero-graph').html('');
                $('#hero-graph').highcharts({
                    credits: {
                        enabled: false
                    },
                    chart: {
                        renderTo: 'hero-graph',
                        height: 320,
                        width: 710
                    },
                    title: {
                        text: null,
                    },
                    legend: {
                        enabled: false
                    },
                    xAxis: {
                        categories: data.deployement.categories
                    },
                    yAxis: {
                        title: {
                            text: 'No. Participants'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    series: data.deployement.series
                });
            }
        },
        complete: function() {
            $('#loader-deployement-box').fadeOut(400, function(){
                $('#deployement-box').fadeIn(400);
            });
            getFacilitators(courses, user);
        }
    });
}

我搜索了很长时间，没有找到任何可以修复它的东西。

有人有想法或已经遇到过这个问题吗？

Answer 1

第一个问题解决了

 $('#hero-bar').highcharts({
                    chart: {
                        renderTo: 'hero-bar',
                        type: 'column',
                        events:{
                            load: function(){
                                var c = this;
                                setTimeout(function() {
                                    $('#hero-bar').highcharts().reflow();
                                }, 500);
                            }
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    legend: {
                        enabled: false
                    },
                    title: {
                        text: null
                    },
                    xAxis: {
                        categories: data.contents.categories,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: ''
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:12px">{point.key}</span><table>',
                        pointFormat: '<tr>' +
                        '<td style="padding:0"><b>{point.y}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.1,
                            borderWidth: 0
                        }
                    },
                    series: data.contents.series
                });

但还有第二个，这真的很奇怪。 有什么想法吗？