css 在AngularJ中,Highcharts在第一次加载时溢出

xtfmy6hx  于 2023-08-08  发布在  Angular
关注(0)|答案(1)|浏览(131)

第一次加载它的溢出。除此之外,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'
                }
            }]
        });

    }
})();

kkih6yb8

kkih6yb81#

在加载时调用图表上的setSize()为我解决了这个问题:

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

字符串
11. hello

相关问题