Web前端文档阅读笔记-vis.js在vue cli中的使用

程序运行截图如下：

首先要用npm导入的vis包

npm run vis

程序结构如下：

源码如下：

HelloWorld.vue

<template><div id="networkDemo" style="width:800px; height: 600px"></div></template><script>import {createNode} from 'JS/visTest.js'
export default {name: 'HelloWorld',mounted(){this.init();},data () {return {msg: 'Welcome to Your Vue.js App'}},methods: {init(){createNode('networkDemo')}}
}
</script><style scoped>
</style>

visTest.js

import vis from 'vis'export function createNode(idStr) {let nodes = new vis.DataSet([{id: 1, label: 'Node 1'},{id: 2, label: 'Node 2'},{id: 3, label: 'Node 3'},{id: 4, label: 'Node 4'},{id: 5, label: 'Node 5'},]);let edges = new vis.DataSet([{from: 1, to: 3, label: 'Hello'},{from: 1, to: 2},{from: 2, to: 4},{from: 2, to: 5},{from: 3, to: 5}])let container = document.getElementById(idStr);let data = {nodes: nodes,edges: edges};let options = {};let network = new vis.Network(container, data, options);
}

Web前端文档阅读笔记-vis.js在vue cli中的使用相关推荐

Web前端文档阅读笔记-vis.js动态添加节点（vue cli环境）
这里主要是针对vis的network图进行节点动态添加图用的是vis.js,表单使用的是element-ui 程序运行截图如下: 添加一个节点: 这里是不需要刷新页面就能添加的. 程序结构如下: 关 ...
two.js文档阅读笔记-two.js的基本使用
介绍 two.js是一个前端绘制2d图形的api.可以使用svg,canvas,webgl进行渲染. 基本使用代码如下: <!DOCTYPE html> <html lang=&q ...
Qt文档阅读笔记-Q_INVOKABLE官方解析及Qt中反射的使用
Q_INVOKABLE宏定义了函数在元对象中可以进行调用,这个宏要写到返回值的前面,也就是函数的开头,如下例子: class Window : public QWidget{Q_OBJECTpubli ...
FreeRTOS官方指导文档阅读笔记
FreeRTOS官方指导文档阅读笔记基于 161204_Mastering_the_FreeRTOS_Real_Time_Kernel-A_Hands-On_Tutorial_Guide.pdf,可 ...
Qt文档阅读笔记-共享库的创建与调用
使用共享库的符号这个符号可以作用在变量.类.函数中,并且这些都可以被调用端使用. 在编译共享库中,需要使用export符号.在使用端调用的时候使用import符号. 这里是本人从文档中记录的笔记,大 ...
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图 QHeightMapSurfaceDataProxy:是Q3DSurface的一个基本代理类. 他是专门加载高度图. 高度图是没有X, ...
Qt文档阅读笔记-Rotations Example相关
Rotations Example文档阅读笔记使用这种方式,对y轴和z轴进行旋转. QQuaternion yRotation = QQuaternion::fromAxisAndAngle(0.0 ...
Blockly学习之文档阅读笔记
文档阅读来源--谷歌官网介绍: https://developers.google.com/blockly/guides/overview 概述一个用于Web.Android.iOS的可视化代码编辑 ...
Leaflet文档阅读笔记-Quick Start Guide笔记
目录网络加载JS和CSS 初始化地图在地图上做标记在地图上点击事件获得坐标个人对这篇文档的体会网络加载JS和CSS 先要加载css,然后在加载js <link rel="st ...

Web前端文档阅读笔记-vis.js在vue cli中的使用

Web前端文档阅读笔记-vis.js在vue cli中的使用相关推荐

最新文章

热门文章