为什么在使用组合图表时我的样条图表不显示？

Question

所以我将 Highcharts-ng 与 Angular 结合使用来创建样条图和柱状图的组合图表，柱状图的格式为直方图以显示趋势。

它的工作方式是在加载页面时，我只看到直方图，而不是样条曲线。更改顺序没有任何作用。

看起来好像我硬编码了样条图表数据，但在调用服务后使用程序添加数据不起作用。

(function() {
  'use strict';

angular
    .module('app.widgets')
    .directive('trends', trends);

trends.$inject = ['ResultsService'];

/* @ngInject */

function trends() {
    var ddo = {
        restrict: 'EA',
        templateUrl: 'app/widgets/trends/trends.directive.html',
        link: link,
        scope: {
            data: '=',
            config: '='
        },
        controller: controller,
        controllerAs: 'vm',
        bindToController: true
    };

    return ddo;

    function link(scope, element, attrs) {

    }

    function controller($scope, ResultsService) {

        var vm = this;
        var parent = $scope.widgetController;
        var size = {

            height: angular.element('li.widget-border.ng-scope.gridster-item')[1].style.height - 20 ,
            width: angular.element('li.widget-border.ng-scope.gridster-item')[1].style.width - 20
        };

        vm.histogram = {
            chart: {
                zoomType: 'xy'
            },
            title: {
                text: 'Average Monthly Weather Data for 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: {
                    style: {
                        color: Highcharts.getOptions().colors[2]
                    }
                },
                title: {
                    text: 'Events',
                    style: {
                        color: Highcharts.getOptions().colors[2]
                    }
                }


            },
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 80,
                verticalAlign: 'top',
                y: 55,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },

                series: [{
                    name: 'Average',
                    type: 'spline',
                    data: [],
                    marker: {
                        enabled: true
                    }
                }],


            loading: false,
            useHighStocks: false,
            size: {
                height: size.height,
                width: size.width
            }
        };



        vm.processChartData = processChartData;

        vm.data = {
            charts: {
            }
        };



        ResultsService.getData().then(function(res) {
            vm.data = {
                charts: {}
            };

            vm.data.charts = processChartData(res);

            vm.histogram.xAxis.categories = [];
            vm.histogram.series.push ({
                name: 'Events per month',
                type: 'column',
                data: [],
                marker: {
                    enabled: true
                }
            });
            console.log(vm.histogram.series);
            angular.forEach(vm.data.charts.months, function(v,k){

                vm.histogram.xAxis.categories.push(k);
                vm.histogram.series[1].data.push(v);

                });
            vm.histogram.options = {
                plotOptions: {

                }
            };
            vm.histogram.options.plotOptions = {

                column: {

                    borderWidth: 0.5,
                    groupPadding: 0,
                    shadow: true


                },

            };
            console.log(vm.data.charts.months);
            vm.histogram.xAxis.categories.sort();

           var average = calculateAverage();
            vm.histogram.series[0].data=average;

            console.log(vm.histogram.series);






        });

        function swap(pos1, pos2){
            var temp = vm.histogram.series[pos1];
            vm.histogram.series[pos1] = vm.histogram.series[pos2];
            vm.histogram.series[pos2] = temp;



        }

        function calculateAverage() {

            var averageArray = [];
            var total = 0;
            angular.forEach(vm.data.charts.months, function(v,k){
                console.log(v);
                total += v;
            });
            console.log((total/12.0).toFixed(2));
            var average = (total/12.0).toFixed(2);

            angular.forEach(vm.histogram.xAxis.categories, function(v,k){
                averageArray.push(average);

            });
            return averageArray;


        }



        function processChartData(data) {
            var output = {};
            var months = {};
            var dayOfWeek = {};
            var epoch = {};



            angular.forEach(data, function (value, index) {
                // by month
                if (!months[value.eventDate.month]) {
                    months[value.eventDate.month] = 1;
                }
                months[value.eventDate.month] += 1;

                // by day of week
                if (!dayOfWeek[value.eventDate.dayOfWeek]) {
                    dayOfWeek[value.eventDate.dayOfWeek] = 1;
                }
                dayOfWeek[value.eventDate.dayOfWeek] += 1;

                // by day
                if (!epoch[value.eventDate.epoch]) {
                    epoch[value.eventDate.epoch] = 1;
                }
                epoch[value.eventDate.epoch] += 1;


            });
            output.months = months;
            output.dayOfWeek = dayOfWeek;
            return output;
        }
        $scope.$on('gridster-item-resized', function(item){


            var element = angular.element(item.targetScope.gridsterItem.$element[0]);

            vm.histogram.size = {
                height: element.height()-35,
                width: element.width()
            };
            $scope.$broadcast('highchartsng.reflow');

        });




    }


}


})();

The chart on the webpage looks like this with the given code!

如您所见，它显示了带有样条曲线的图例，但没有显示样条曲线。我不知道为什么。

Answer 1

您的 calculateAverage() 函数 returns 一个字符串数组，因为 .toFixed(2) returns 一个字符串。确保它是一个数字数组。例如，使用 average = parseFloat(average) 将平均值转换为数字。

为什么在使用组合图表时我的样条图表不显示？

Why isn't my spline chart showing when using combo charts?

charts

highcharts

angularjs

highcharts-ng