Подключение угловойJS к сюжету

Итак, я хочу использовать angularJS для получения данных с сервера и построения данных с использованием Plotly. Я запускаю сервер в фоновом режиме. HTML, который я использую, показан ниже. Я думаю, что это довольно прямолинейно.Подключение угловойJS к сюжету

<!DOCTYPE html> 
<html> 
<head> 
    <title>Testign Plotly</title> 
    <script type="text/javascript" src='plotly.min.js'></script> 
    <script type="text/javascript" src='jquery.min.js'></script> 
    <script type="text/javascript" src='angular.min.js'></script> 
    <script type="text/javascript" src='plotApp.js'></script> 
</head> 
<body ng-app='myApp'> 
<div id="graph" style="width:600px;height:250px;"></div> 
<script type="text/javascript" ng-controller='plotXY'> 

    // var data = [{ 
    //  x:[1,2,3,4], 
    //  y:[5,3,6,12], 
    // }]; 

    Plotly.plot($('#graph')[0], {{data}} , {margin: {t:0}}); 
</script> 
<hr><div ng-controller='plotXY'>{{data}}</div> 

</body> 
</html>

У меня есть сценарий angularJS plotApp.js, как показано ниже, также очень просто ...

var app = angular.module('myApp', []); 

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

    $scope.data = {}; 

    $scope.refresh = function(){ 
     $http.get('http://localhost:8080/data').success(function(data){ 
      $scope.data = {}; 
      for(k in data){$scope.data[k] = data[k].map(Number);} 
      $scope.data = [$scope.data]; 
     }); 
    }; 

    $scope.refresh(); 
});

Теперь скомпилированный HTML для этого (сохраненные в браузере) показан ниже ...

<!DOCTYPE html> 
<html><head> 
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style> 
    <title>Testign Plotly</title> 
    <script type="text/javascript" src="Testign%20Plotly_files/plotly.js"></script><style></style> 
    <script type="text/javascript" src="Testign%20Plotly_files/jquery.js"></script> 
    <script type="text/javascript" src="Testign%20Plotly_files/angular.js"></script> 
    <script type="text/javascript" src="Testign%20Plotly_files/plotApp.js"></script> 
</head> 
<body class="ng-scope" ng-app="myApp"> 
<div id="graph" style="width:600px;height:250px;"></div> 
<script class="ng-scope" type="text/javascript" ng-controller="plotXY"> 

    // var data = [{ 
    //  x:[1,2,3,4], 
    //  y:[5,3,6,12], 
    // }]; 

    Plotly.plot($('#graph')[0], {{data}} , {margin: {t:0}}); 
</script> 
<hr><div class="ng-scope ng-binding" ng-controller="plotXY">[{"y":[1.26642e-14,2.8044e-14,6.1484e-14,1.33457e-13],"x":[-10,-9,-8,-7]}]</div> 
</body></html>

Как вы можете сказать, часть в пределах div получает обновления с правильными данными. Однако, что внутри скрипта нет!

Как раз вы знаете, если я использую переменную data (тот, который закомментирован), я могу видеть сюжет. Так Plotly работает.

Я хочу, чтобы клиент извлекал данные с сервера и отображал их на графике. Я могу это сделать, если я создам всю страницу с сервера и отправлю ее. Однако я думаю, что этот способ намного лучше. Однако по какой-то причине я, похоже, не могу подключить источник данных в Plotly, к этому в angularJS. Я бы очень признателен за помощь ...

источник

2016-02-03 ssm

Plotly-метод обновления данных, кажется, через Plotly.restyle():

var update = {x: [[0,1,2], y: [[5,2,4]]}; 
Plotly.restyle(graphDiv, update, 0);

Просто убедитесь, что вы используете двойные массивы, когда вы хотите обновить массив. Plotly поддерживает обновление нескольких трасс сразу через массивы, поэтому [[0,1,2],[1,3,4]] обновит два следа.

источник

2016-02-08 19:07:13 Durd

Оказывается, вам нужно использовать 'directive'. Вот небольшой учебник, который я написал после большой помощи от людей здесь http://codepen.io/omolluska/post/rapid-prototyping-of-systems-for-visual-display-iii – ssm

Интересно. Я думаю, что я бы по-прежнему использовал 'Plotly.restyle()' вместо 'newPlot()' только для обновления трасс, а не для перерисовывания всего графика. – Durd

Подключение угловойJS к сюжету

ответ

Смежные вопросы