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。

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

如果你这样做：

if float(mmin) <= float(current) <= float(mmax) and 0 <= capacity <= 100:

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

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

如果您不明白它是如何工作的，请随意询问。

Angularjs，Amcharts不能与json数据对象一起分配给数据提供者而不是实际数据

1 个答案: