项目场景：

一个项目计划看板上，有很多计划单，这些计划单根据时间状态来显示在不同的位置，然后以圆角矩形条状实现，(这个功能很久以前的同事做好了已经)。
要求把相关联的订单用线连接起来（我要做这个）。
在我查询论坛，并且问了各种ai后，确定使用JSPlumb，因为比较适合我当前的这个项目的实际情况，

问题描述

这段代码是我最开始写的，能绘制连接线，但是这个线连接不到关联订单上，发现有很大的偏移，因为我要绘制线的那块页面结构很复杂，

 plumbIns.ready(function () {
                  targets.forEach((target, index) => {
                    setTimeout(() => {
                      const sourceId = String(order.id);
                      plumbIns.connect({
                        source: sourceId, //开始订单
                        target: target,   //结束订单
                        anchor: 'Bottom', // 使用计算后的坐标,
                        connector: ['Flowchart', { stub: 10, alwaysRespectStubs: true }],
                        endpoint: 'Blank',
                        overlays: [
                          ['Arrow', { width: 8, length: 8, location: 1 }],
                          // ['Label', { label: '×', location: 0.5, cssClass: 'onnecting-line-prompt-class' }]
                        ],
                        paintStyle: { stroke: '#1890FF', strokeWidth: 2 },
                      });

                    }, 100); // 延迟100毫秒
                  });
                  // 在连接完成后调用 repaintEverything
                  plumbIns.repaintEverything();
                });

原因分析：

就是没有设置指定的容器的时候，这个线会默认从全局最边为基准，所以绘制的偏差很大，让它在指定的容器里去绘制就行了

解决方案：

jsPlumb.ready(function () {
  // 重置jsPlumb实例
  jsPlumb.reset()

  // 设置默认配置
  jsPlumb.setContainer('right') //设置指定的容器里绘制，
  jsPlumb.importDefaults({
    Connector: ['Flowchart', { stub: 10, alwaysRespectStubs: true }],
    Anchors: ['Bottom', 'Top'],
    Endpoint: 'Dot',
    PaintStyle: { stroke: 'black', strokeWidth: 2 },
    EndpointStyle: { fill: 'black', radius: 3 },
  })

  // 连接div1和div2
  jsPlumb.connect({
    source: 'MDT300031',
    target: 'MDT3032',
  })
  
})

就这样写就可以了，其他还有锚点，出发点和结束点的线的方向位置，正常来说是从那一面的正中心出和近，如果有特殊需求，要这个线不是从指定面的中心出发，可以这样写，例如：从右下角进 ,左上角进 [[1, 0.8, 1, 0],[0.2, 0, 0, -1]]