Диаграммы последовательности с использованием библиотек yii2 framework -vis.js

Question

Я хочу использовать ДИАГРАММЫ ПОСЛЕДОВАТЕЛЬНОСТИ со стрелками в нем и несколькими полями над стрелками. эти поля предназначены для печати данных в них. Как я могу нарисовать диаграмму, как это, используя YII2 MVC Framework? Как я могу использовать vis.js для этого?

мне нужно перебрать несколько диаграмм по циклу, зависит от входных данных.

Отредактировано: это мой файл composer.json

{
    "name": "yiisoft/yii2-app-basic",
    "description": "Yii 2 Basic Project Template",
    "keywords": ["yii2", "framework", "basic", "project template"],
    "homepage": "http://www.yiiframework.com/",
    "type": "project",
    "license": "BSD-3-Clause",
    "support": {
        "issues": "https://github.com/yiisoft/yii2/issues?state=open",
        "forum": "http://www.yiiframework.com/forum/",
        "wiki": "http://www.yiiframework.com/wiki/",
        "irc": "irc://irc.freenode.net/yii",
        "source": "https://github.com/yiisoft/yii2"
    },
    "minimum-stability": "dev",
    "require": {
        "php": ">=5.4.0",
        "yiisoft/yii2": "~2.0.14",
        "yiisoft/yii2-bootstrap": "~2.0.0",
        "yiisoft/yii2-swiftmailer": "~2.0.0",
        "2amigos/yii2-date-picker-widget": "~1.0",
    "yiisoft/yii2-bootstrap": "@dev",
        "kartik-v/yii2-widget-datepicker": "dev-master",
    "kartik-v/yii2-widget-datepicker": "@dev",
        "kartik-v/yii2-widget-datetimepicker": "dev-master",
        "kartik-v/yii2-widget-select2": "dev-master",
        "wadeshuler/yii2-sendgrid": "dev-master",
        "codeonyii/yii2-at-least-validator": "dev-master",
        "listfixer/yii2-remember-me": "*",
        "bower-asset/vis": "*",
    },
    "require-dev": {
        "yiisoft/yii2-debug": "~2.0.0",
        "yiisoft/yii2-gii": "~2.0.0",
        "yiisoft/yii2-faker": "~2.0.0",

        "codeception/base": "^2.2.3",
        "codeception/verify": "~0.3.1",
        "codeception/specify": "~0.4.3"
    },
    "config": {
        "process-timeout": 1800,
        "fxp-asset": {
            "enabled": false
        }
    },
    "scripts": {
        "post-install-cmd": [
            "yii\\composer\\Installer::postInstall"
        ],
        "post-create-project-cmd": [
            "yii\\composer\\Installer::postCreateProject",
            "yii\\composer\\Installer::postInstall"
        ]
    },
    "extra": {
        "yii\\composer\\Installer::postCreateProject": {
            "setPermission": [
                {
                    "runtime": "0777",
                    "web/assets": "0777",
                    "yii": "0755"
                }
            ]
        },
        "yii\\composer\\Installer::postInstall": {
            "generateCookieValidationKey": [
                "config/web.php"
            ]
        }
    },
    "repositories": [
        {
            "type": "composer",
            "url": "https://asset-packagist.org"
        }
    ]
}

А вот расположениеиз моих файлов vis вендора.

C: \ xampp \ htdocs \ ops_asst-2.1 \ vendor \ bower-asset \ vis

Это файлы, которые у меня есть в этом

Answer 1

Я использую библиотеки с открытым исходным кодом vis.js .

https://visjs.org/

Структура папок с расширенными возможностями Yii2

{app-root}

• внешний интерфейс
  • assets
    • VisAsset.php
  • контроллеры
    • {foldername} Контроллер. php
  • views
    • {foldername}
      • workflow.js
      • view.php
• поставщик
  • бауэр-актив
    • vis
    • {vis files}

Добавьте требование composer.json:

Добавьте следующее в ваш composer.json: "bower-asset/vis": "*"

Затем запустите composer update для установкиthe libray.

Убедитесь, что Composer Config

Убедитесь, что в вашей конфигурации композитора есть место для установки библиотеки vis в виде vendor / bower-assets.

    "config": {
        "process-timeout": 1800,
        "fxp-asset": {
            "installer-paths": {
                "npm-asset-library": "vendor/npm",
                "bower-asset-library": "vendor/bower"
            }
        }
    },

Создание AssetBundle

Создание файла в вашем приложении: frontend/assets/VisAsset.php

<?php

namespace frontend\assets;

use yii\web\AssetBundle;

/**
 * vis.js asset bundle.
 */
class VisAsset extends AssetBundle
{
    //public $basePath = '@webroot';
    //public $baseUrl = '@web';
    public $sourcePath = '@bower';
    public $css = [
        'vis/dist/vis.css', 
    ];
    public $js = [
        'vis/dist/vis.js',
    ];
    public $depends = [
        //'yii\web\YiiAsset',
        //'yii\bootstrap\BootstrapAsset',
    ];   
}

Создание сценария workflow.js

Созданиеfile: 'frontend / views / {имя-папки} /workflow.js'

var nodesArray = [
  {id:  1, label: 'A-Label'},
  {id:  2, label: 'B-LAbel'},
];

var edgesArray = [
  {from: 1, to: 2},
];

var nodes = new vis.DataSet(nodesArray);
var edges = new vis.DataSet(edgesArray);

// create a network
var container = document.getElementById('mynetwork');
container.innerHTML = 'Loading';
var data = {
    nodes: nodes,
    edges: edges
};
var height = 400;
var width = 900;
var options = {
    autoResize: true,
    height: height +'px',
    width: width + 'px',
    layout: {
        hierarchical: {
            enabled:false,
            //levelSeparation: 150,
            //nodeSpacing: 200,
            //treeSpacing: 200,
            //blockShifting: true,
            //edgeMinimization: true,
            //parentCentralization: true,
            //direction: 'UD',        // UD, DU, LR, RL
            //sortMethod: 'directed'   // hubsize, directed
          }
    },
    nodes: {
        shape: 'box',
        margin: {
            top: 10,
            bottom: 10,
            left: 10,
            right: 10
        },
        font: {
            size: 18
        },
    },
    physics: false,
};
window.network = new vis.Network(container, data, options);

Обновление вида

В вашем frontend/views/{folder-name}/view.php файле добавьте:

//Register the vis.js and vis.css vendor files.
app\assets\VisAsset::register($this); 
$this->registerJs($this->render('workflow.js'));

и

<div id="mynetwork" style=""></div>