Question

所以我想使用angularJS从服务器获取数据并使用Plotly绘制数据。我在后台运行服务器。我正在使用的HTML如下所示。我认为这很简单。

<!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中的数据源。我真的很感激一些帮助...

Answer 1

更新数据的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]]将更新两个跟踪

将angularJS连接到plotly

1 个答案: