Question

我是Angular的新手，只是习惯了一切如何融合在一起。我想通过指令显示图表。此图表将是静态数据，因此既不会动态加载也不会更新，而是来自JSON。

我引用了here，但主要区别在于我没有在视图中加载Highcharts。我在bower_components目录的.js文件中全局加载它。这是我的代码：

的.js

/* global Highcharts */

angular.module("fusoDataLoggerChart", [])

    .controller("fusoDataLoggerChartController", ["$http", "$scope", function($http, $scope) {
        "use strict";

         $scope.data = {
             "activities": [
                {},
                {},
                {
                    "title": "Engine speed",
                    "type": "DATA_LOGGER",
                    "result": {
                        "Engine speed": {
                            "data": [
                                {
                                    "timestamp": 0,
                                    "value": {
                                        "type": "QUANTITY",
                                        "unit": "rpm",
                                        "value": 900
                                    }
                                },
                                {
                                    "timestamp": 1000,
                                    "value": {
                                        "type": "QUANTITY",
                                        "unit": "rpm",
                                        "value": 1000
                                    }
                                },
                                {
                                    "timestamp": 2000,
                                    "value": {
                                        "type": "QUANTITY",
                                        "unit": "rpm",
                                        "value": 2000
                                    }
                                }
                            ]
                        },
                        "Accelerator pedal position": {
                            "data": [
                                {
                                    "timestamp": 0,
                                    "value": {
                                        "type": "QUANTITY",
                                        "unit": "%",
                                        "value": 0
                                    }
                                },
                                {
                                    "timestamp": 1000,
                                    "value": {
                                        "type": "QUANTITY",
                                        "unit": "%",
                                        "value": 10.6
                                    }
                                },
                                {
                                    "timestamp": 2000,
                                    "value": {
                                        "type": "QUANTITY",
                                        "unit": "%",
                                        "value": 11
                                     }
                                }
                            ]
                        }
                    }
                }
            ]
        }
    }])

    .directive("fusoDataLoggerChart", function() {
        "use strict";

        return {
            scope: {},
            restrict: 'E',
            link: function(scope) {
                scope.dataLoggerData = scope.data["activities"][2]["result"];

                scope.timestamps     = getData()[0];
                scope.engineSpeeds   = getData()[1];
                scope.pedalPositions = getData()[2];

                var chart = new Highcharts.Chart({
                    chart: {
                        type: 'line',
                        animation: false,
                        renderTo: "DataLoggerChartContainer",
                        zoomType: 'x'
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: null
                    },
                    xAxis: {
                        type: "linear",
                        title: {
                            text: "Timestamp"
                        },
                        min: 0,
                        categories: scope.timestamps
                    },
                    yAxis: [{       //Engine Speed
                        title: {
                            text: 'Engine Speed'
                        },
                        labels: {
                            format: '{value} RPM'
                        },
                        opposite: true
                    }, {            //Accelerator Pedal Position
                        title: {
                            text: 'Accelerator Pedal Position'
                        },
                        labels: {
                            format: '{value} %'
                        },
                        min: 0,
                        max: 100,
                        // FIXME: 'allowDecimal' may not work
                        allowDecimal: true
                    }],
                    series: [{
                        name: 'Engine Speed',
                        type: 'spline',
                        yAxis: 1,
                        tooltip: {
                            valueSuffix: ' RPM'
                        },
                        data: scope.engineSpeeds
                    }, {
                        name: 'Accelerator Pedal Position',
                        type: 'spline',
                        yAxis: 2,
                        tooltip: {
                            valueSuffix: ' %'
                        },
                        data: scope.pedalPositions
                    }]
                });

                function getData() {
                    var timestamps      = [],
                        engineSpeeds    = [],
                        pedalPositions  = [];

                    var engineSpeedData = scope.dataLoggerData["Engine Speed"]["data"],
                        pedalPosData    = scope.dataLoggerData["Accelerator Pedal Position"]["data"];

                    for (var i in engineSpeedData) {
                        timestamps.push(engineSpeedData[i].timestamp);
                    }

                    for (var j in engineSpeedData) {
                        engineSpeeds.push(engineSpeedData[j].value.value);
                    }

                    for (var k in pedalPosData) {
                        pedalPositions.push(pedalPosData[k].value.value);
                    }

                    return [timestamps, engineSpeeds, pedalPositions];
                }
            }
        }
    });

HTML

<fuso-data-logger-chart>
    <div id="DataLoggerChartContainer"></div>
</fuso-data-logger-chart>

当我去图表的地方时，没有显示任何内容（当我检查DevTools时，只显示手动设置的HTML代码，里面没有任何内容）。

N.B：我意识到我还不需要控制器，但它在那里，因为将来JSON将来自控制器内的休息呼叫

任何帮助表示感谢。

Answer 1

这不是您问题的完整答案，但我注意到您可以使HTML指令更清晰，以便您可以改为使用此格式：

<fuso-data-logger-chart></fuso-data-logger-chart>

您不需要<div id="DataLoggerChartContainer">。您可以将其作为模板嵌入到指令定义中：

.directive("fusoDataLoggerChart", function() {
        "use strict";

        return {
            scope: {},
            restrict: 'E',
            transclude: true,
            template: '<div id="DataLoggerChartContainer"></div>'
            link: function(scope) {
                ... your other code ...
            }
        }
});

Answer 2

我已经找到了问题所在。有多个错误，但我会留在这里，所以也许别人可以发现它有用：

Highcharts和我的FusoDataLoggerChart.js未加载到index.html（<script src="modules/readVehicleData/FusoDataLoggerChart.js"></script>），这意味着Angular无法看到它们。
在我的指令中，我试图访问scope.data函数中的本地范围（link()），而不是尝试访问父级设置数据的控制器范围。要访问父作用域，scope.$parent.data为我工作（ NB：只是＆＃39;数据＆＃39;对我来说就像我设置的值一样）

在AngularJS中使用指令的Highcharts

2 个答案: