在页面/容器上丢失系列渲染的Solid Gauge图表调整大小[ng-highcharts + angular]

Question

我已经定制了一个实心的仪表图表，它在一个简单的html容器上运行时工作正常

检查此JS Fiddle here

但是在将它与angular和ng-highcharts集成后，系列数据将失去渲染效果。

检查此JS Fiddle here

期待的外观：

调整大小后:(渲染时的大部分时间）：

解决这个问题会很好，花了很多时间来修复它。 感谢。

//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {

    $scope.chartConfig = {
        options: {
                chart: {
                        renderTo: 'container',
                        type: 'solidgauge',
                        height:100,
                        width:100,
                        spacingTop: 0,
                        spacingRight: 0,
                        spacingBottom: 0,
                        spacingLeft: 0,
                        plotBorderWidth: 0,
                        marginRight: 0, //-60, //this does move the chart but you'll need to recompute it
                        marginLeft: 0, //-60,  //whenever the page changes width
                        marginTop: 0,
                        marginBottom: 0
                    },
                    tooltip: {
                        enabled: false
                    },
                    title: {
                        text: ''
                    },
                    credits: {
                        enabled: false
                    },
                    pane: {
                        size: '99%',
                        startAngle: 0,
                        endAngle: 360,

                        background: {
                            //innerRadius: '50%', #fix for inner border :D
                            outerRadius: '101%',
                            backgroundColor: '#ffffff',
                        }
                    },
                    plotOptions: {
                        solidgauge: {
                            dataLabels: {
                                enabled: false,
                            }
                        }
                    },
                    yAxis: {
                        labels: {
                            enabled: false
                        },

                        min: 0,
                        max: 100,
                        gridLineColor: 'transparent',
                        lineColor: 'transparent',
                        minorTickLength: 0,
                        tickInterval: 67, //supply value from API
                        tickPositions: [67], //from api 67%
                        tickColor: '#000000',
                        tickPosition: 'outside',
                        tickLength: 4,
                        tickWidth: 1,

                    },

                },

             series:[{
                    innerRadius: '70%',
                    data: [{y:55,color:'red'}],
                    radius: '55%'
                }, {
                    innerRadius: '85%',
                     data: [{y:55,color:'orange'}],
                    radius: '70%'
                }, {
                    innerRadius: '100%',
                    radius: '85%',
                     data: [{y:25,color:'green'}],
                }, {
                    innerRadius: '101',
                    data: [{y:57,color:'black'}]
                }],

            loading: false
    }
});

Answer 1

这显然是固体规格插件的一个问题。问题here和相应的修补程序in this commit可应用于您的实体规范代码文件。