javascript - 在 AngularJS 中将提供程序与 Highcharts 图表的 Controller 结合使用时出现问题

Question

我正在构建一个具有 highcharts 集成 (highcharts-ng) 的 Angular Web 应用程序

我所做的是设置一个工厂提供程序，声明我的图表配置选项对象，如下所示:

angular.module('socialDashboard')

   .factory('SentimentChartFactory', function() {
   var sentimentGraph = {
      options: {
      chart: {
      type: 'area',
      backgroundColor: false,
      height: 450,
      zoomType: 'x'
    }
  },
  colors: ['#d1d5d8', '#954145', '#41a85f'],
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { // don't display the dummy year
      month: '%e. %b',
      year: '%b'
    },
    gridLineWidth: 1
  },
  yAxis: {
    title: {
      text: 'Sentiment %'
    },
    gridLineWidth: 0,
    labels:
    {
      enabled: false
    }
  },
  series: [
    {
      name: 'Basic Neutral',
      data: [
        [Date.UTC(2014, 10, 10), 60],
        [Date.UTC(2014, 10, 11), 55],
        [Date.UTC(2014, 10, 12), 50],
        [Date.UTC(2014, 10, 13), 60],
        [Date.UTC(2014, 10, 14), 55],
        [Date.UTC(2014, 10, 15), 60],
        [Date.UTC(2014, 10, 16), 55],
        [Date.UTC(2014, 10, 17), 50],
        [Date.UTC(2014, 10, 18), 60],
        [Date.UTC(2014, 10, 19), 55],
       ]
     }
    ],
    loading: false
    };
    return sentimentGraph;
});

然后，我为我的图表设置一个 Controller ，在其中从工厂提供程序中提取选项对象

angular.module('socialDashboard')

    .controller('SentimentChartController', function ($scope, $http, SentimentChartFactory) {

        // Set up chart on summary page    
        $scope.SentimentChartSummaryConfig = SentimentChartFactory;
        $scope.SentimentChartSummaryConfig.options.chart.height = 250;

        // Set up chart on Sentiment Page
        $scope.SentimentChartConfigMain = SentimentChartFactory;
        $scope.SentimentChartConfigMain.options.chart.height = 450;
});

这是我声明我的图表的地方:

摘要页:

<div ng-controller="SentimentChartController">
    <highchart id="{{link + '_chart'}}" config="SentimentChartSummaryConfig"></highchart>
</div>

情绪页面:(不同 View )

<div ng-controller="SentimentChartController">
    <highchart id="{{link + '_chart'}}" config="SentimentChartConfigMain"></highchart>
</div>

我遇到的问题是，即使我为配置属性声明了不同的值，两个图表都显示为相同的高度(450)。这是为什么？我该如何解决这个问题？

Answer 1

问题是因为在这两种情况下您处理的是相同对象，因为SummaryConfig和MainConfig都是对相同的引用>SentimentChartFactory 对象。

这种情况下最简单的解决方案是让服务每次都返回新对象:

angular.module('socialDashboard')
.factory('SentimentChartFactory', function() {
    return {
        getConfig: function() {
            return {
                options: {
                    chart: {
                        type: 'area',
                        backgroundColor: false,
                        height: 450,
                        zoomType: 'x'
                    }
                },
                colors: ['#d1d5d8', '#954145', '#41a85f'],
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: { // don't display the dummy year
                        month: '%e. %b',
                        year: '%b'
                    },
                    gridLineWidth: 1
                },
                yAxis: {
                    title: {
                        text: 'Sentiment %'
                    },
                    gridLineWidth: 0,
                    labels: {
                        enabled: false
                    }
                },
                series: [{
                    name: 'Basic Neutral',
                    data: [
                        [Date.UTC(2014, 10, 10), 60],
                        [Date.UTC(2014, 10, 11), 55],
                        [Date.UTC(2014, 10, 12), 50],
                        [Date.UTC(2014, 10, 13), 60],
                        [Date.UTC(2014, 10, 14), 55],
                        [Date.UTC(2014, 10, 15), 60],
                        [Date.UTC(2014, 10, 16), 55],
                        [Date.UTC(2014, 10, 17), 50],
                        [Date.UTC(2014, 10, 18), 60],
                        [Date.UTC(2014, 10, 19), 55],
                    ]
                }],
                loading: false
            }
        }
    };
});

然后像这样使用它:

$scope.SentimentChartSummaryConfig = SentimentChartFactory.getConfig();
$scope.SentimentChartSummaryConfig.options.chart.height = 250;

$scope.SentimentChartConfigMain = SentimentChartFactory.getConfig();
$scope.SentimentChartConfigMain.options.chart.height = 450;