如何使用Highcharts和大量动态数据构造Angular

Question

我知道有时候如果没有代码就有点困难，但是我想检查一些关于如何构建一个增长速度非常快的代码的想法，并希望在它变得更糟之前做到这一点:)

为此，我使用Java(Spring)作为后端， Angular和Highcharts 。

基本上它是一个包含一些图表的仪表板，并根据用户选择动态填充。 它的数据每15秒也会自动刷新一次。

我在Java中有一个后端，我可以获得这些数据。

在Angular ，我在控制器中有一些函数来操作数据，创建高级图表，设置系列，加载用户选项等等。 还有一种服务可以查询数据并进行一些操作。

现在这个仪表板工作正常，我将需要做一个类似的仪表板，但具有不同的内容/上下文，但实际上，相同的结构和功能。

所以这就是..今天我有一个服务和一个控制器用于所有这些，并且控制器中有几个DOM操作，以使这项工作。

问题您能否就我如何构建所有这些代码给出一些想法？ 我想：

• 能够很容易地测试它
• 将此代码重用于类似的仪表板
• 有一个更容易维护的代码（现在有许多函数具有复杂的逻辑来处理数据，处理刷新并且很难维护）

我正在阅读John Papa风格指南，现在想到了两个解决方案，但似乎非常有问题 〜：

1. 创建一个代表图表的指令，因此具有相当重的逻辑以便检索数据和所有数据。 我认为测试并不确定性能会有点困难。
2. 创建一个名为Dashboard的模块，它将包含所有这些功能，但在许多mini-services分开，而不是只有一个。 因此，一个服务将检索数据，其他服务将处理事件，其他服务将创建Highcharts对象。

你能帮我吗？ 如果你有一些链接，书籍或任何有助于此的东西，我真的很感激！

提前致谢！

Answer 1

我在最近的项目中做了类似的事情，我有10到15页，每个页面都装满了不同类型的图表。

我提出的更简单和最好的方法是为不同的图表创建公共服务，并使用公共基本图表指令来查找图表数据中的更改。

我的图表服务的基本结构如下所示。 仅供演示，我将饼图作为参考。

(function (angular) {
    var module = angular.module('pie-chart', ['my-project']);

   module.service('pieChartService', [
       'globalVariables', 'SharedDataService', '$q', '$filter', '$log', 'serverDataHelper',
       function (globalVariables, SharedDataService, $q, $filter, $log, serverDataHelper) {

           var getBaseChartData = function (chart) {

               var seriesObj = getSeriesObj(chart);

               var baseChartData = {
                   chart: {
                       type: 'pie',
                       width: 250 + 100 + 30,                      
                       height: 210,
                       style: {
                           fontFamily: "'Open Sans', sans-serif, arial;",
                       },
                       spacing: [0, 0, 0, 0]
                   },
                   title: {
                       text: ''
                   },
                   legend: {
                       align: 'right',
                       verticalAlign: 'middle',
                       layout: 'vertical',
                       itemMarginTop: 16,
                       useHTML: true, // in order to disable legend navigation
                       itemStyle: {
                           fontSize: '13px',
                           fontWeight: 'normal',
                           cursor: 'default'
                       },
                       symbolWidth: 13,
                       symbolHeight: 13,
                       symbolPadding: 11
                       width: 110,
                       y: -12
                   },
                   tooltip: {
                       backgroundColor: '#fff',
                       borderColor: '#ccc',
                       borderRadius: 3,
                       borderWidth: 1,
                   },
                   plotOptions: {
                       pie: {
                           showInLegend: true,
                           dataLabels: {
                               formatter: function () { return this.percentage > 0 ? $filter('number')(this.percentage, globalVariables.fractionSize) + '%' : ''; },
                               distance: -25,
                               color: 'white',
                               style: {
                                   fontSize: '14px',
                                   fontWeight: 'normal',
                                   textShadow: 'false'
                               }
                           },
                           center: [100, 90],
                           size: 180,
                           borderWidth: 3,
                           states: {
                               hover: {
                                   halo: {
                                       opacity: 0.75,
                                       size: 5
                                   },
                                   brightness: 0
                               }
                           },
                           point: {
                               events: {
                                   legendItemClick: function (event) { event.preventDefault(); }
                               }
                           }
                       }
                   },
                   series: seriesObj
               };
               return baseChartData;
           }

           var defaultChartSerieColors = [
               '#f8981d', //orange    
               '#6663ac', //purple 
               '#54b4c8', // blue 
               '#fecd08', // yellow 
               '#a3ca5f', // green 
               '#ef4036' // red 
           ];

           var getSeriesObj = function (chartObj) {
               var serie = {
                   data: [],
                   serverDateRanges: {
                       primary: {
                           startDate: undefined,
                           endDate: undefined
                       },
                       secondary: {
                           startDate: undefined,
                           endDate: undefined,
                       },
                   }
               };

               var series = [serie];

               jQuery.each(chartObj.Data, function (index, pointData) {

                   var point = {
                       name: pointData.Name,
                       y: pointData.Value,
                       color: defaultChartSerieColors[index],
                       Id: pointData.Id,
                       serverData: pointData
                   };
                   serie.data.push(point);
               });

               return series;
           }
           this.getPieChartData = function ($scope, url, params, chartDiff) {

               var pieChartDataPromise = serverDataHelper.getChartData(
                           url,
                           params);

               pieChartDataPromise.then(function (serverResponse) {
                   var pieChart = serverResponse.data;

                  var pieChartData = getBaseChartData(pieChart.Primary);

                   var chartData = jQuery.extend(true, {}, pieChartData);
                   chartData = jQuery.extend(true, chartData, chartDiff);

                   $scope.pieChartData = chartData;
               });

               return pieChartDataPromise;
           };
       }
    ]);
})(window.angular);

serverDataHelper ：这是http调用的常用服务。 SharedDataService ：用于存储整个应用程序的公共数据的服务。

将上面的代码放到名为pieChart.js的单独文件后，控制器代码如下所示。

(function () {
    var module = angular.module('social.module', [
        //dependancy
    ]);

    var urls = {
        getSocialChartUrl: 'api end point'        
    };

    var socialChartDataDiff = {
        chart: {
            height: 220,
            width: 600,
            backgroundColor: 'rgba(255, 255, 255, 0.1)'
        },
        legend: {
            enabled: true,
            x: -200,
            useHTML: true,
            labelFormatter: function () {
                return '<span class="legend-title">' + this.name + '</span>' + '<span class="legend-value"> (' + this.y + ')</span>';
            },
            itemStyle: {
                cursor: 'pointer'
            }
        },
        plotOptions: {
            pie: {
                showInLegend: true,
                dataLabels: {
                    /*format: '{percentage:.2f}',*/
                    formatter: function () { return this.point.y; },
                    distance: -25,
                    color: 'white',
                    style: { "fontSize": "11px" }
                },
                borderWidth: 0,
                states: {
                    hover: {
                        halo: {
                            opacity: 0.75,
                            size: 5
                        },
                        brightness: 0
                    }
                },
                point: {
                    events: {
                        event.preventDefault(); 
                        }
                    }
                }
            }
        },
        tooltip: {
            formatter: function () {
                return this.key + ': ' + this.y;
            }
        }
    };

    module.controller('socialOnPageController', [
     '$scope', 'mcatSharedDataService', 'globalVariables', 'pieChartService', 'socialOnPageService', 'chartHelperService', '$q',
    function ($scope, mcatSharedDataService, globalVariables, pieChartService, socialOnPageService, chartHelperService, $q) {

            var params = {
                //params
            };

            var chartDataPromise = pieChartService.getPieChartData($scope, urls.getSocialChartUrl, params, socialChartDataDiff);

    }]);

})();

您需要在控制器中添加pieChartService的依赖项。

socialChartDataDiff ：您可以在此处更改默认图表配置。 就我而言，所有图表在工具提示，图例等方面都没有相同的外观。 在基础饼图实现中，我使用此图表差异扩展默认配置。 如果所有图表看起来相同，则无需在此处传递任何内容

我的标记类似于下面的内容。

<mi-chart value="pieChartData" chart-obj="pieChartDataObj" is-fixed-width="true"></mi-chart> 

mi-chart是一个寻找基本图表变化的指令。

mi-chart的代码类似于下面的内容，这在我的应用程序中对于所有图表都是通用的。

(function () {

    var module = angular.module('mi-chart', []);

    module.directive('miChart', ['$rootScope', function ($rootScope) {

        return {
            restrict: 'E',
            template: '<div id="chartContainer" class="chartContainer"></div>',
            scope: {
                chartData: "=value",
                chartObj: "=?"
            },
            replace: true,
            link: function ($scope, $element, $attrs) {
                $scope.$watch('chartData', function (value) {
                    if (!value) {
                        return;
                    }

                    $scope.chartData.chart.renderTo = $scope.chartData.chart.renderTo || $element[0];
                    $scope.chartObj = new Highcharts.Chart($scope.chartData);
                });
            }
        }
    }]);

})();

希望它会对你有所帮助。