AngularJSのディレクティブを使用したハイチャート

Question

私はAngularを初めて使い、すべてのものがどのように適合するかに慣れています。私はディレクティブでグラフを表示したい。このチャートは静的なデータなので、動的に読み込まれたり更新されたりすることはなく、JSONから取得されます。

私はhereを参照しましたが、主な相違点は、ビューにハイチャートをロードしていないことです。私は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> 

、何も示されていない（とのみHTMLれます私がDevToolsをチェックインすると、手動でコードセットが表示されます）。

N.B：私は、コントローラはまだ必要ありません実現が、それはJSONがコントローラ

感謝すべてのヘルプ内からREST呼び出しから得たであろう将来のようにあります。

Answer 1

私はこの問題を理解しました。そこ複数のエラーがあったが、私はので、多分他の誰かがそれを有用見つけることができるここにこれを残しておきます：

1. Highchartsと私のFusoDataLoggerChart.jsがindex.htmlにロードされていなかった（<script src="modules/readVehicleData/FusoDataLoggerChart.js"></script>）彼らは角度で見ることができなかったことを意味します。私の指示で
2. 、私はlink()機能にローカルスコープ（scope.data）にアクセスしようとする代わりに、データが設定されているコントローラに親スコープにアクセスしようとしていました。親スコープにアクセスするには、scope.$parent.dataは私のために働いた（N.B：それは私が設定した値だとしては私にとって唯一の「データ」だった）

Answer 2

これは、あなたの質問への完全な答えではないですが、私はあなたの代わりにこのフォーマットを使用することができるように、あなたの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 ... 
      } 
     } 
});