我正在尝试使用 angularJS 创建一个plotly.js 绘图。
这是app.js ...
var app = angular.module('graphPlotterDemoApp', []);
app.controller('PlotCtrl1', function ($scope) {
$scope.data = [{
x: [1, 2, 3, 4],
y: [10, 15, 12, 17]}];
});
app.directive('linePlot', function () {
// Create a link function
function linkFunc(scope, element, attrs) {
scope.$watch('data', function (plots) {
var layout = {
'width': attrs.width,
'height': attrs.height,
'pad':'0',
'margin': { 't': 0, 'b':20, 'l':40, 'r':0 },
};
Plotly.newPlot(element[0], plots, layout);
});
}
// Return this function for linking ...
return {
link: linkFunc
};
});
我有这个 html
<!DOCTYPE html>
<html>
<head lang="en">
<title>Plotly Graph Plotter Directive for AngularJS - Demo</title>
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="plotly.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="graphPlotterDemoApp">
before div = PlotCtrl1
<div ng-controller="PlotCtrl1">
{{data}}
<table>
<thead><tr><td>x</td><td>y</td></tr></thead>
<tbody ng-repeat='x1 in data[0].x'>
<tr>
<td><input type='number' ng-model='data[0].x[$index]'></td>
<td><input type='number' ng-model='data[0].y[$index]'></td>
</tr>
</tbody>
</table>
<line-plot width=300, height=200>
</div>
</body>
</html>
绘图出现了，但事实证明，当我更改输入框中的值时，虽然数据实际上发生了变化，但绘图并没有改变。有办法解决这个问题吗？
最佳答案
对于复杂对象，尝试使用 $watchCollection 或 $watch 并将 objectEquality 参数设置为 true。例如 $watch('data',function(){},true);
关于javascript - 关联绘图图和 Angular JS 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35280314/