问题
I need some help in creating a network graph using visjs in angularjs. I am working on this plunker to achieve something like this
I followed the steps mentioned in AngularJS - visjs but was unable to make it work so I created a plunker (given above) to get help from community.
Controller code.
var app = angular.module('app', ['ngVis']);
app.controller('MainCtrl', ['$scope', 'VisDataSet',
function($scope, VisDataSet) {
$scope.data = VisDataSet({
"1": {
"id": 1,
"content": "<i class=\"fi-flag\"></i> item 1",
"start": "2014-09-01T17:59:13.706Z",
"className": "magenta",
"type": "box"
},
"2": {
"id": 2,
"content": "<a href=\"http://visjs.org\" target=\"_blank\">visjs.org</a>",
"start": "2014-09-02T17:59:13.706Z",
"type": "box"
},
"3": {
"id": 3,
"content": "item 3",
"start": "2014-08-29T17:59:13.706Z",
"type": "box"
},
"4": {
"id": 4,
"content": "item 4",
"start": "2014-09-01T17:59:13.706Z",
"end": "2014-09-03T17:59:13.706Z",
"type": "range"
},
"5": {
"id": 5,
"content": "item 5",
"start": "2014-08-30T17:59:13.706Z",
"type": "point"
},
"6": {
"id": 6,
"content": "item 6",
"start": "2014-09-04T17:59:13.706Z",
"type": "point"
},
"7": {
"id": 7,
"content": "<i class=\"fi-anchor\"></i> item 7",
"start": "2014-08-28T17:59:13.706Z",
"end": "2014-08-29T17:59:13.706Z",
"type": "range",
"className": "orange"
}
});
$scope.options = {
"align": "center",
"autoResize": true,
"editable": true,
"selectable": true,
"orientation": "bottom",
"showCurrentTime": true,
"showCustomTime": true,
"showMajorLabels": true,
"showMinorLabels": true
};
}
]);
Please help me in figuring out the problem in this plunker
回答1:
I saw a few issues. First, you were including your css files as scripts instead of as stylesheets. So use this:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.3.0/vis.css">
<link rel="stylesheet" type="text/css" href="style.css">
Second if you take a look at angular-vis.js, you'll see that the directive should actually be vis-timeline. So I just changed it to this in the html:
<vis-timeline data="data" options="options"></vis-timeline>
I removed the events attribute because that wasn't defined on your scope, but I assume you can look at the visjs documentation to see what should go there.
See the revised plunker for the whole fix.
来源:https://stackoverflow.com/questions/31001134/how-to-create-network-graph-or-hierarchical-tree-using-visjs-in-angularjs