我正在做一个 Angular 应用程序，我最近发现了 Metrics Graphics .问题是我很难将它集成到我的 Angular 应用程序中，因为它是为 Jquery 构建的。
另一个棘手的问题是我的 Angular 应用程序正在使用一个 restful API，而对于我想要集成的图形，数据在 API 中。
生成图形的代码:
$(function () {
d3.json('file/json.json', function(data) {
data_graphic({
data: data,
width: 650,
height: 150,
target: '#element',
x_accessor: 'Month',
y_accessor: 'Value'
})
});
});
如您所见，此代码从 json 文件中提取数据。值得庆幸的是，我的 API 也返回 json 格式，即 http://api.example.com/api/data .
所以我想做的是将这个 jquery 脚本绑定(bind)到一个 Angular Directive(指令)(或 Controller )中，并使数据来自 API 而不是文件。
谢谢
最佳答案
这是一个简单的例子，所有的事情都由指令处理:
app.directive('metrics', function($http) {
return {
restrict: 'E',
link: function(scope, element) {
var success = function(result) {
data_graphic({
title: "UFO Sightings",
description: "Yearly UFO sightings from 1945 to 2010.",
data: result,
markers: [{
'year': 1964,
'label': '"The Creeping Terror" released'
}],
width: 400,
height: 250,
target: element[0],
x_accessor: "year",
y_accessor: "sightings",
interpolate: "monotone"
});
};
var error = function() {
console.log('Error.');
};
$http.get('data.json').success(success).error(error);
}
};
});
用法:
<metrics></metrics>
您可以将 data.json 替换为您需要的 URL，只要它返回正确的格式即可。 success 函数将启动 data_graphic 并将 data 设置为 $http.get 的结果，并以指令 DOM 元素为目标。
演示: http://plnkr.co/edit/SOfTS6KL0GJ7ynvyrBfn?p=preview
如果您希望 Controller 处理数据的检索:
app.controller('MyController', function($scope, $http) {
var success = function(result) {
$scope.data = result;
};
var error = function() {
console.log('Error.');
};
$http.get('data.json').success(success).error(error);
});
指令:
app.directive('metrics', function($http) {
return {
restrict: 'E',
scope: {
data: '='
},
link: function(scope, element) {
data_graphic({
title: "UFO Sightings",
description: "Yearly UFO sightings from 1945 to 2010.",
data: scope.data,
markers: [{
'year': 1964,
'label': '"The Creeping Terror" released'
}],
width: 400,
height: 250,
target: element[0],
x_accessor: "year",
y_accessor: "sightings",
interpolate: "monotone"
});
}
};
});
用法:
<body ng-controller="MyController">
<metrics ng-if="data" data="data"></metrics>
</body>
请注意，ng-if 用于防止指令在数据可用之前执行。
演示: http://plnkr.co/edit/96IVbjlZk8nriiREHdl4?p=preview
下一步是将 data_graphic 中使用的整个对象也传递给指令，使其更加通用和可重用。
关于javascript - 如何在 Angular 应用程序中绑定(bind) graphicsmetrics jquery 插件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27252464/