javascript - 如何使用 Highcharts 和大量动态数据构建 Angular

Question

我知道有时没有代码会有点困难，但我想检查一些想法，了解如何构建快速增长的代码，并希望在它变得更糟之前完成:)

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

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

我在 Java 中有一个后端，我从中获取这些数据。

在 Angular 中，我在 Controller 中有一些函数来操作数据、创建图表、设置系列、加载用户选项等等。还有一个查询数据并进行一些操作的服务。

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

事情是这样的.. 今天我有一个服务和一个 Controller 来处理所有这些，并且在 Controller 中有几个 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:为整个应用程序存储公共(public)数据的服务。

将上述代码放入名为 pieChart.js 的单独文件后， Controller 代码如下所示。

(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);

    }]);

})();

需要在controller中添加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);
                });
            }
        }
    }]);

})();

希望对你有所帮助。