Оптимальный способ использования угловых директив и JSON

javascript angularjs json amcharts

78 просмотра

1 ответ

Я хочу эффективный способ учета угловой директивы, которая написана для отображения диаграммы.

Прочитав другие ответы здесь, я нашел хороший способ создать директиву, которая отображает одну диаграмму без каких-либо проблем.

Как повторно использовать одну и ту же директиву для отображения разных графиков? Каждой диаграмме нужен объект JSON, который имеет параметры и данные для визуализации.

Я не хочу загрязнять мой Angular View, набирая 100-150 строк JSON и передавая его через директиву.

Подробности:-

  • У каждой диаграммы есть несколько общих пар ключ / значение, которые я могу оставить в директиве.
  • Как добавить пары ключ-значение для каждой диаграммы в каждую директиву?

Например: - скажем, я хочу, чтобы на одном графике были зеленые полосы, а на другом - красные линии.

Угловая директива

(function () {

    'use strict';

    angular
        .module("analytics")
        .directive("angularDirectiveAmcharts", angularDirectiveAmcharts);

    function angularDirectiveAmcharts() {

        var directive = {
            link: link,
            restrict: 'A',
            replace: true,
            scope: {
                chartdata: '=',
                type: '=',
                customstyle: '@',
                chartsettings: '=',
                chartid: '@'
            },
            template: '<div id="{{ chartid }}" style="{{ customstyle }}"></div>'
        };

        return directive;             


        function link(scope, elem, attrs) {
            AmCharts.makeChart(scope.chartid, {
                "type": "serial",
                "categoryField": "date",
                "autoMarginOffset": 10,
                "marginRight": 20,
                "marginTop": 20,

                 //I've deleted lots of keys and values for the sake of brevity


                "dataProvider": scope.chartdata
            });


        }
    }
})();

Посмотреть

<div class="chartarea" ng-controller="pcController as vm">

    <div angular-directive-amcharts chartid="chartdiv" chartdata="vm.chart_data"></div>

</div>

Я особенно уверен в ремонтопригодности, потому что после моей стажировки будет сделано много изменений.

Автор: Abhirath Mahipal Источник Размещён: 08.11.2019 11:14

Ответы (1)


1 плюс

Решение

Части данного кода в этом ответе основаны на другом ответе

Вы можете использовать сервис, чтобы обеспечить стандартную конфигурацию для всех ваших директив диаграммы. В этом сервисе вы можете определить эту стандартную конфигурацию один раз и объединять ее с конкретной конфигурацией каждый раз, когда создается директива. Таким образом, вам нужно только объявить незначительные изменения в вашем контроллере.

Необязательная, но возможная привязка конфигурации в директиву:

<div ng-controller="myCtrl">
    <my-chart></my-chart>
    <my-chart config="conf"></my-chart>
</div>

Конкретная конфигурация в контроллере:

myapp.controller('myCtrl', function ($scope) {
    $scope.conf = {
        graphs: [{ type: 'column' }]
    };
});

Сервис для конфигурации по умолчанию (используя jQuerys способ глубокого объединения объектов):

myapp.service('chartService', function () {
    this.defaultConfig = {
        "type": "serial",
        // reduced object for readabilty
    };
    this.getConfig = function (mergeObj) {
        return $.extend(true, {}, this.defaultConfig, mergeObj);
    }
});

Данные передаются через другой сервис и добавляются в конфигурацию после слияния:

var config = chartService.getConfig(scope.config || {});
config.dataProvider = dataProvider.getData();
chart = AmCharts.makeChart(element[0], config);

Я подготовил скрипку , чтобы вы могли взглянуть на пример.

Автор: gerric Размещён: 22.08.2016 08:32
Вопросы из категории :
32x32