问题描述
尝试在Salesforce中使用vis.js网络库我曾在LWC和api版本40.0的Aura组件中都尝试过,但是正在接收 regeneratorRuntime未定义[regeneratorRuntime未定义] 尝试使用https://unpkg.com/browse/vis-network@8.1.0/standalone/umd/vis-network.min.js
解决方法
这是我认为可以解决您问题的方法。
第一种方法(仅当库足够小以作为LWC组件上传时)
您需要创建两个LWC组件:
- myNetwork
- myNetwork.js
- myNetwork.html
- myNetwork.js-meta.xml
- visNetworkLib
- visNetwork.js = esm/vis-network.min.js的内容
- visNetwork.js-meta.xml
import { LightningElement } from 'lwc'
import { DataSet,Network } from 'c/visNetworkLib'
export default class MyNetwork extends LightningElement {
nodes = null
edgeds = null
renderedCallback () {
this.nodes = new 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'},])
this.edges = new DataSet([
{from: 1,to: 3},{from: 1,to: 2},{from: 2,to: 4},to: 5},{from: 3,])
const container = this.template.querySelector('div.myNetwork')
this.network = new Network(container,{
nodes: this.nodes,edges: this.edges,},{})
}
}
<template>
<div
lwc:dom="manual"
class="myNetwork"
></div>
</template>
第二种方法
创建一个静态资源名称visNetwork,它是上载的vis-network.min.js
然后像在myNetwork.js中那样加载它
import { LightningElement } from 'lwc'
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
import visNetworkUrl from '@salesforce/resourceUrl/visNetwork'
import { loadScript } from 'lightning/platformResourceLoader'
export default class MyNetwork extends LightningElement {
nodes = null
edgeds = null
visLoaded = false;
renderedCallback() {
if (!this.visLoaded) {
this.visLoaded = true;
loadScript(this,visNetworkUrl).then(() => {
this.initializeNetwork();
})
.catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error loading vis network',message: error.message,variant: 'error'
})
);
});
}
}
initializeNetwork () {
this.nodes = new DataSet([
{id: 1,])
this.edges = new DataSet([
{from: 1,])
const container = this.template.querySelector('div.myNetwork')
this.network = new Network(container,{
nodes: this.nodes,{})
}
}
,
我已经弄清楚了,您必须将vis-data与vis-network分开加载。您可以在此处根据NPSP关系和NPSP隶属关系找到我的工作示例。 https://github.com/mrainboldt/visNetworkMapLWC