Angularjs，Amcharts 不使用 json 数据对象分配给数据提供者而不是实际数据

Question

如何在我的指令中将JSON 数据对象传递给dataProvider，而不是对实际数据进行硬编码以呈现带有Amcharts 和Angularjs 的图形？ 如果提供 JSON 数据而不是 JavaScript 对象，则呈现图形，否则根本不呈现图形。虽然图表标题可见，但没有创建轴，并且数据点也没有显示在图表中。

angular.module('myApp').directive('activityChart',
   function ( $timeout) {
      return {
        restrict: 'EA',
        replace:true,
        //scope :true,
        template: '<div id="{{chartId}}"  style="width: 100%; height: 400px; overflow: hidden; text-align: left;"></div>' ,
        link: function ($scope, $element, $attrs) {

            var chart = false;

            var initChart = function() {
                if (chart) chart.destroy();
                $scope.chartId = $attrs.chartId;
                $scope.chartUnit = $attrs.chartUnit;
                $scope.chartData = $attrs.chartData;
                console.log($scope.chartData);
                $timeout(function(){var chart = AmCharts.makeChart($scope.chartId, {
                    "type": "serial",
                    "pathToImages": "/assets/amcharts/images/",
                    "categoryField": "time",
                    "dataDateFormat": "YYYY-MM-DD HH:NN:SS",
                    "categoryAxis": {
                        "minPeriod": "mm",
                        "parseDates": true
                    },
                    "chartCursor": {
                        "categoryBalloonDateFormat": "JJ:NN:SS"
                    },
                    "chartScrollbar": {},
                    "trendLines": [],
                    "graphs": [
                        {
                            "bullet": "round",
                            "bulletSize": 4,
                            "id": $scope.chartId,
                            "title": $scope.chartId,
                            "valueField": "value",
                            "type": "smoothedLine",
                            "lineThickness": 2,
                            "lineColor": "#637bb6"
                        }
                    ],
                    "guides": [],
                    "valueAxes": [
                        {
                            "id": "ValueAxis-1",
                            "title": $scope.chartId + " (" + $scope.chartUnit + ")"

                        }
                    ],
                    "allLabels": [],
                    "balloon": {},
                    "legend": {
                        "useGraphSettings": true
                    },
                    "titles": [
                        {
                            "id": "Title-1",
                            "size": 15,
                            "text": $scope.chartId
                        }
                    ],
                    "dataProvider": $scope.chartData,
                });

                });

            };
            initChart();

        }
    }
}) ;

Answer 1

我为您的用例做了一个通用演示。看看这个fiddle。

关键是为你的指令引入一个隔离的范围。这允许您多次使用该指令。

如果你这样做：

scope: {
    // bi directional binding will pass data array to isolated scope
    data: '=',
    title: '@'
},

您可以从父控制器分配数据数组：

<activity-chart data="data" title="This is the title"></activity-chart>

如果您不了解它的工作原理，请随时提问。