Question

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

第一个问题，我使用bootstrap 3，所以我的容器是col-xs-6宽。在我的文档中，这大约是350px宽。该图表保持渲染宽度为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);
            });
        }
    });
}

当我构建我的图表并尝试手动完成＆＃34;完成＆＃34;来自ajax：$（＆＃39;＃hero-bar＆＃39;）。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
                });

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

调整大小时高亮度图消失而不是父宽度

1 个答案: