Javascript 将angularJS连接到plotly_Javascript_Angularjs_Plotly

Javascript 将angularJS连接到plotly

javascript angularjs

Javascript 将angularJS连接到plotly,javascript,angularjs,plotly,Javascript,Angularjs,Plotly,所以我想使用angularJS从服务器获取数据，并使用Plotly绘制数据。我正在后台运行服务器。我正在使用的HTML如下所示。我认为这很直截了当 <!DOCTYPE html> <html> <head> <title>Testign Plotly</title> <script type="text/javascript" src='plotly.min.js'></script> &

所以我想使用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>

现在，此文件的编译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>


@字符集“UTF-8”；[ng \：斗篷]，[ng斗篷]，[x-ng-斗篷]，.ng斗篷，.x-ng-斗篷，.ng隐藏：非（.ng隐藏动画）{display:none！重要；}ng \：表单{display:block；}.ng动画填充{visibility:hidden；}.ng定位{position absolute；}
密谋作证
//风险值数据=[{
//x:[1,2,3,4]，
//y:[5,3,6,12]，
// }];
plot（$（'#graph'）[0]，{{data}}，{margin:{t:0}}）；
[{“y”：[1.26642e-14,2.8044e-14,6.1484e-14,1.33457e-13]，“x”：[-10，-9，-8，-7]}]

可以看出，

div

中的部分使用正确的数据进行更新。但是，脚本中的这一点并不重要

正如您所知，如果我使用

数据

变量（注释掉的变量），我就能看到绘图。所以Plotly在起作用

我希望客户机从服务器中提取数据，并以绘图方式显示数据。如果我从服务器创建整个页面并将其发送过来，我就可以做到这一点。不过，我觉得这样更好。然而，由于某些原因，我似乎无法将Plotly中的数据源连接到angularJS中的数据源。我非常感谢您的帮助……

更新数据的详细方法似乎是：

只要确保在更新数组时使用双数组即可。Plotly支持通过阵列一次更新多条记录道，因此

[[0,1,2]，[1,3,4]

将更新两条记录道

事实证明，您必须使用

指令

。这里是一个小教程，我写了很多帮助后，这里的人很有趣。我想我仍然会使用

Plotly.restyle（）

而不是

newPlot（）

来只更新跟踪，而不是重新绘制整个图形。

<!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>

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