AngularJS + Plotly - 不想找到我的#div

我是AngularJS的新手。我需要連接角劇本情節。這個想法是爲Plotly獲取X和Y的JSON數據。一切都很好，直到積極線。它找不到我的div chart0，chart1，chart2等等。但它們是由ng-repeat（$ index）生成的。我得到錯誤「頁面上不存在帶有id'chart2'的DOM元素」。這是我的代碼：AngularJS + Plotly - 不想找到我的#div

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); 
});

}）;

來源

2017-02-10 Damian Hetman

一個Angular Directive將是這個問題的一個很好的解決方案。使用指令可以將代碼附加到在運行時動態創建的DOM元素。指令還可以幫助您構建模塊化和可重用的代碼。圖表創建順序包括：

從服務器加載數據，並將其轉換爲Plotly。將轉換後的圖表數據保存到作用域變量。
使用圖表數據創建圖表指令的實例，使用ng-repeat，將單個圖表的數據傳遞給指令。
初始化指令中的Plotly圖表，其中數據和元素都可用。

我建立了一個簡單的工作sample of an Angular Directive for Plotly charts來說明這個概念。

但是，您不需要使用我的啞代碼，您可能想要查看angular-plotly或更完整的類似項目。

加載和轉換數據

$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-重複指令在HTML

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

初始化表在指令

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; 
    } 
]);

來源

2017-02-11 20:47:19 James

AngularJS + Plotly - 不想找到我的#div

回答

相關問題