Angularjs highchart doesn't show in IE and SAF

2019-08-20 06:55发布

问题:

highchart doesn't show in IE and SAFARI. I try the solution from the official highchart forum, but nothing help (remove "," at the end of json, or resize page on load etc... ) I have multiple different highcharts, but here is only one for explanation. I call config function depends on chart data. My app have many different parts, and it's very hard to make working plunker. Thnx

Here is my code

function getBaseChartConfig(graphName) {
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });
            var config =
                    {
                        xAxis: {
                            ordinal: false
                        },
                        yAxis: {
                        },
                        options: {
                            chart: {
                                zoomType: 'x',
                                backgroundColor: 'rgba(255, 255, 255, 1)',
                                polar: true,
                                type: 'line',
                                borderRadius: 5

                            },
                            legend: {
                                enabled: true
                            },
                            rangeSelector: {
                                //za postavit rucni upis date range-a
                                enabled: false,
                                inputStyle: {
                                    color: 'black'
                                }
                            },
                            navigator: {
                                enabled: true
                            }
                        },
                        series: [],
                        title: {
                            text: graphName
                        },
                        useHighStocks: true
                    };
            return config;
        };
$scope.data.push(solar_voltage);
            $scope.data.push(battery_voltage);
            $scope.data.push(solar_current);
            $scope.data.push(hybridCurrent);
            $scope.chartConfig1 = getChartConfigWithYaxisPlotLines('Production');
            $scope.chartConfig1.series.push({
                id: 1,
                name: "Solar voltage",
                data: $scope.data[0],
                tooltip: {
                    valueDecimals: 2
                }
            }, {
                id: 2,
                name: "Battery voltage",
                data: $scope.data[1],
                tooltip: {
                    valueDecimals: 2
                }
            }, {
                id: 3,
                name: "Solar current",
                data: $scope.data[2],
                tooltip: {
                    valueDecimals: 2
                }
            }, {
                id: 4,
                name: "Hybrid current",
                data: $scope.data[3],
                tooltip: {
                    valueDecimals: 2
                }
            }
            );
 function getChartConfigWithYaxisPlotLines(graphName) {
            var baseChartConfig = getBaseChartConfig(graphName);
            baseChartConfig.yAxis.plotLines = [{
                    color: '#FF0000',
                    width: 1,
                    value: 11.50,
                    label: {text: '11.50'}
                }];
            return baseChartConfig;
        }

Here is image how this look in safari or IE

And here is in CHROME and FIREFOX

This is my json from api