Question

我正在使用highcharts integration（highcharts-ng）构建一个有角度的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;
});

然后我为我的图形设置了一个控制器，我从工厂提供商那里提取选项对象

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>

情绪页面:(不同观点）

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

我遇到的问题是，即使我为config atttribute声明了不同的值，两个图形也显示为相同的高度（450）。为什么会这样，我该如何解决这个问题？

Answer 1

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

在这种情况下，最简单的解决方案是每次都使服务返回 new object ：

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;

将提供程序与angularjs中的Highcharts图形的控制器结合使用时出现问题

1 个答案: