入职第一波——jsPlumb demo - chart

最新推荐文章于 2022-11-08 17:56:26 发布

王富贵富了吗

最新推荐文章于 2022-11-08 17:56:26 发布

阅读量1.1k

点赞数

分类专栏： jsPlumb

本文链接：https://blog.csdn.net/wsh2467991332/article/details/81167402

版权

本文通过分析 jsPlumb 的 chart 示例代码，帮助读者理解其工作原理。尽管所用版本较旧，但核心用法相似。文章首先展示界面效果，接着讲解界面布局、js 文件引入，然后详细解读初始化 jsPlumb、设置颜色变量、实例化及绘制流程，旨在使读者更好地掌握 jsPlumb 的使用。

摘要由CSDN通过智能技术生成

翻译了很久的文档，但对于 jsPlumb 的运用依然感觉云里雾里的，所以决定好好看看 dome 代码，结合代码理解知识，真的比较好理解。在此我尝试讲解 jsPlumb 中的例子，chart。

注意，我翻译的文档和我使用的例子不是同一个版本，原因嘛，那自然是公司要求的版本是老一点的。虽然版本不大一样，但基础用法是相似的。讲解开始。

首先，看一下界面效果图。

界面效果图如上，用户可以自己拖动框。具体功能可以参见官网 demo。在此我主要对代码进行解释。

首先，是界面基本布局。代码如下：

<div class="jtk-demo-main">
            <!-- demo -->
            <div class="jtk-demo-canvas canvas-wide chart-demo jtk-surface jtk-surface-nopan" id="canvas">
                <div class="window" id="chartWindow1">window one</div>
                <div class="window" id="chartWindow2">window two</div>