Highcharts-ng Size会填充div直到Inspect Element [英] Highcharts-ng Size does fill div until Inspect Element

问题描述

我使用Highcharts-NG为我的Angular-Firebase应用程序添加了highcharts，并且highchart不假定div的大小。但是，当我检查元素时，我可以自定义图表大小，它会奇迹般地呈现div大小。我做了搜索，并尝试了一些我发现的修复，但都没有工作。这是一个已知的问题？如何在没有检查元素的情况下正确设置尺寸？

I am adding highcharts to my Angular-Firebase app using Highcharts-NG and the highchart is not assuming the size of the div. However, when I got to inspect the element so I can custom size the chart it magically assumes the div size. I've done a search and have tried some of the fixes I have found but none work. Is this a known issue? How do I get it to size properly without inspect element?

我有这个问题的YouTube视频：LINK

<div ng-show="overviewOn">
    <div class="col-md-12 text-center">
        <table class="table table-bordered">
            <thead>
                <th>Total Score</th>
                <th>Strokes Gained Putting</th>
                <th>Penalty Strokes</th>
            </thead>
            <tbody>
                <td>{{round.totalScore}}</td>
                <td>{{round.sgPutting | number:2 }}</td>
                <td>{{round.penalty}}</td>
            </tbody>
        </table>
    </div>
    <div class="col-md-12 shotTypeChart">
        <div style="width:100%;margin: 0 auto">
            <highchart id="sgShotTypeChart" config="sgShotTypeChartConfig"></highchart>
        </div>
    </div>
    <div class="col-md-12 clubChart">
        <highchart id="sgClubChart" config="sgClubsChartConfig"></highchart>
    </div>
</div>

$scope.sgClubsChartConfig = {
            options: {
                chart: {
                    type: 'column'
                },
                plotOptions: {
                    column: {
                        dataLabels: {
                            enabled: true,
                            crop: false,
                            overflow: 'none',
                            formatter: function () {
                                return Highcharts.numberFormat(this.y, 2);
                            }
                        }
                    }
                },
                tooltip: {
                    pointFormat: "Strokes Gained: {point.y:.2f}",
                    style: {
                        padding: 10,
                        fontWeight: 'bold',
                    }
                }
            },
            series: [{
                showInLegend: false,
                data: sgByClubData,
                name: 'Strokes Gained'
            }],
            title: {
                text: 'Strokes Gained by Club'
            },

            loading: false,
            yAxis: {
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    },

                },
                title: {
                    text: null
                }
            },
            xAxis: {
                categories: clubsData,
            },
            credits: {
                enabled: false
            },
            useHighStocks: false,
        };

推荐答案

我发现并不是那么微妙的方法来修复它。只需添加以下几行：

I've found not so delicate way to fix it. Just add these lines:

 setTimeout(function() {
                    $(window).resize();
                }, 0);

这篇关于Highcharts-ng Size会填充div直到Inspect Element的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！