AngularJS + Plotly - 私の#divを探したくありません

Question

私はAngularJSを初めて使っています。私はプロットするために角のスクリプトを接続する必要があります。この考え方は、PlotlyのXとYのJSONデータを取得することです。プロットするまではすべてが問題ありません。私のdivs chart0、chart1、chart2 ...などは見つかりませんが、ng-repeat（$ index）によって生成されます。 「id2のDOM要素がありません」というエラーが表示されます。これは私のコードです：

app.controller('archive', function($scope, $http) { 

var layout = { margin: { l: 40, r: 20, b: 35, t: 20, pad: 4 } } 

$http.get("json.php?module=archive").then(function(response) { 

    $scope.sensors = response.data; 

    angular.forEach($scope.sensors, function(value, key) {    
     var data = [{ x: value.x.split(","), y: value.y.split(","), type: 'scatter', name: value.name }]; 
     Plotly.newPlot("chart"+(key-1), data, layout, {displaylogo: false, showLink: false, autosize: false}); 
    }); 

}, function(response) { 
    alert("Error: "+response); 
}); 

}）;

Answer 1

Angular Directiveは、この問題の良い解決策になります。ディレクティブを使用すると、実行時に動的に作成されるDOM要素にコードをアタッチできます。ディレクティブは、モジュール化して再利用可能なコードを構築するのにも役立ちます。グラフの作成順序には、次のものが含まれます。

1. サーバーからデータを読み込んでPlotlyに変換します。変換されたグラフデータをスコープ変数に保存します。
2. ng-repeatを使用してチャートデータを使用してチャートディレクティブのインスタンスを作成し、個々のチャートのデータをディレクティブに渡します。
3. ディレクティブで、データと要素の両方が使用可能なPlotlyチャートを初期化します。

私は概念を説明するために単純化された作業sample of an Angular Directive for Plotly chartsを構築しました。

しかし、私のダムコードを使用する必要はありません。angular-plotlyまたはより完成した同様のプロジェクトをチェックしてください。

ロードと

testApp.directive("plotlyChart", [ 
    function() { 
    function plotlyChartLink (scope, element, attrs) { 
     Plotly.plot(element[0].firstChild, scope.chartdata, scope.layout, scope.options); 
    } 
    var directive = { 
     restrict: "E", 
     scope: { 
      chartdata: "=", 
      layout: "=", 
      options: "=" 
     }, 
     template: "<div class='chart'></div>", 
     link: plotlyChartLink 
    }; 
    return directive; 
    } 
]); 

指令にHTMLに

$scope.loadData = function() { 
    var rawSensorData = [ 
     { 
     "name": "Chart One", 
     "x": "1, 2, 3", 
     "y": "2, 4, 6" 
     }, 
     { 
     "name": "Chart Two", 
     "x": "2, 4, 6, 8", 
     "y": "1, 2, 3, 5" 
     } 
    ]; 
    $scope.sensorChartData = rawSensorData.map(function (value, key) { 
     var data = [{ x: value.x.split(","), y: value.y.split(","), type: 'scatter', name: value.name }]; 
     return data; 
    }); 
    }; 

NGリピート指令

<plotly-chart chartdata="sensor" layout="layout" options="options" 
    ng-repeat="sensor in sensorChartData"> 
</plotly-chart> 

初期チャートデータの変換