0

angularjsで visjsを使用してネットワーク グラフを作成する際に助けが必要です。私はこのようなものを達成するためにこのプランカーに取り組んでいます

AngularJS - visjsに記載されている手順に従いましたが、機能させることができなかったため、コミュニティから助けを得るためにプランカー (上記) を作成しました。

コントローラーコード。

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
      };
  }
]);

このプランカーの問題を理解するのを手伝ってください

4

1 に答える 1

1

いくつかの問題を見ました。まず、css ファイルをスタイルシートではなくスクリプトとしてインクルードしていました。だからこれを使う：

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

次に、angular-vis.js を見ると、ディレクティブが実際には vis-timeline であることがわかります。だから私はそれをhtmlでこれに変更しました：

<vis-timeline data="data" options="options"></vis-timeline>

events 属性はスコープで定義されていなかったため削除しましたが、visjs のドキュメントを参照して、そこに何が必要かを確認できると思います。

修正全体については、改訂されたplunkerを参照してください。

于 2015-06-23T16:11:47.613 に答える