在 angularjs 中将提供程序与控制器结合用于 Highcharts 图形的问题

Question

我正在构建一个 angular 集成了 highcharts 的网络应用程序 (highcharts-ng)

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

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>

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

Answer 1

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

在这种情况下，最简单的解决方案是每次都创建服务return新对象：

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 图形的问题

Problems using provider in conjunction with a controller for Highcharts graphs in angularjs

javascript

highcharts

angularjs