Highcharts 在 AngularJs 中首次加载时溢出

Question

第一次加载就溢出了。 除此之外，highcharts 在其他事件中工作得很好，并在之后相应地调整大小。

错误截图链接 http://screenshot.co/#!/d97639604f

mypage.tmpl.html

<div class="dashboard" layout="column">
 <div layout="column"  class="drag-container" layout-xs="column" layout-margin id="chartcontainer">
        <div id="linechart" class="highcharts-container"  >Placeholder for chart</div>
    </div>
</div>

mypage.tmpl.scss

.highcharts-container
{
  width:auto !important; height:auto !important; overflow: hidden !important;
}

myctrl.js

(function () {
    'use strict';

    angular
        .module('app.mymodule')
        .controller('myCtrl', myCtrl);

    /* @ngInject */
    function myCtrl($scope, $timeout) {

        var vm = this;


        //HIGHCHARTS

        Highcharts.chart('linechart', {
            chart: {

                events: {
                    load: function(event) {
                        event.target.reflow();

                    }
                },
                renderTo: 'chartcontainer',
                zoomType: 'xy'
            },
            title: {
                text: 'Average Monthly Temperature and Rainfall in Tokyo'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: [{
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                crosshair: true
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}°C',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: 'Temperature',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Rainfall',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                labels: {
                    format: '{value} mm',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 120,
                verticalAlign: 'top',
                y: 100,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },
            series: [{
                name: 'Rainfall',
                type: 'column',
                yAxis: 1,
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                tooltip: {
                    valueSuffix: ' mm'
                }

            }, {
                name: 'Temperature',
                type: 'spline',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                tooltip: {
                    valueSuffix: '°C'
                }
            }]
        });

    }
})();

Answer 1

加载时在图表上调用 setSize() 解决了我的问题：

chart: {
    events: {
        load: function() {
            this.setSize();
        }
    }

使用 Highcharts 11.