Luckysheet chartmix 统计图实现原理分析及协同实现

前言

        说明：本篇仅代表个人观点哈，官网是没有相关具体实现方案。在实际的相关API开发过程中，借鉴了源码 chart/plugin.js 关于 chartmix 的使用方法，API实现尽量贴合luckysheet源码风格！

        具体实现方案从敲定、撰写，到具体落地实现，均为个人独立完成，如有雷同，纯属巧合！同时，关于此篇文章的使用授权，请注明出处：

https://blog.youkuaiyun.com/weixin_47746452

再次声明哈，研究不易，请尊重原创，注明出处！

整体效果

1. 分析插件原理

        不知道大家有没有认真分析过源码，为啥配置 plugins:['chart'] ，就能具有统计图功能？

`src/core.js`中，执行的 create 核心函数，其中调用了initPlugins方法：

如果注册了 chart，就会执行 chart方法：

方法中，主要处理的事，就是动态引入依赖！！！然后初始化chartmix的基础工作。 

2. 处理依赖问题

store_default.createChart is not a function

        我想大家应该会遇到上面的报错 ，官网的提示是说：确保所有依赖均被加载！还记得上面的动态加载依赖吗？通过CDN下载vue@2.6.11的时候，可能存在网址不能访问的问题，就会报这个错，怎么解决呢？解决办法是下载文件到本地，引用本地链接，（请确保 vue 的引入在 vuex 之前）

        如果统计图插件加载成功，控制台会打印 chartmix::

相关文件下载路径：插件下载地址

WARNING：这样设置了之后，请求地址成为 [location.origin]/expendPlugins/.....，但是生产环境你的public可能不是这个目录，因此，建议将expendPlugins文件，复制一份，放到 public下，结构如下：

3. 捕获图表创建事件

        至此，我们分析了插件的实现原理，解决了异常报错问题，开始正式分析具体的落地方案了哈，同时，统计图相关操作方法，大部分都在 chart/plugin.js 能找到。 好像我们点击按钮，就可以直接出来统计图了，内部是如何实现的呢？

        点击按钮执行的事件，就是 plugin.js 中的 createLuckyChart 方法，方法内部调用了核心的 chartmix createChart：

因此，我们应该在 createLuckyChart  方法中，进行创建图表协同：

 具体发送的数据格式，参考官网:新增图表协同数据格式

重要结论：劫持用户创建图表操作，实现协同第一步(发送创建协同消息)

4. 捕获图表移动、缩放事件

        图表的移动、缩放，应该是DOM具备的能力，而不是统计图本身，不知道大家理不理解。

 因此，全局搜索该标识：

 在 handler.js 中有相关方法，判定图表的拖动、缩放，都在这里实现，因此在这里劫持操作：

重要结论：在 handler.js 中进行图表移动、缩放的操作劫持，发送相关协同消息 

5. 捕获图表删除事件

重要结论： plugin.js 中有 delChart方法，用于删除图表

6. 实现 chart API

        因为API操作是相互映射的，在 global/api.js 中新增三个API,参数暂定哈，后面视情况调整：

        API的具体实现，写在 controller 中，新建 chart.js 文件：

7. 实现创建统计图

根据 plugin.js 中创建统计图所需要的基础数据，在 api 中进行处理：

controller 中直接模仿 plugin.js createChart进行图表的创建（复制修改+调试）：

与原生功能一致，有些BUG或者报错的，后面再处理哈~ 但是！这里有一个问题：

        我们创建统计图的时候，无法控制图形类型，(如果谁能解决这个问题，欢迎大家留言~)但是官网提供的案例，每次刷新，都是固定的统计图，这肯定不是 createChart 实现的，根源就是官网的是有 options 数据，直接根据options创建，就可以固定类型：

根据分析，官网使用的是 renderChart 方法，可以传入 options 实现统计图创建, 因此，需要提供一个方法，根据 options 创建统计图： 。

        这样才能实现根据options 创建统计图，每次创建的都是同一个类型的，这个方法是协同实现的重要方法哈！！！用户A创建折线图，协同到用户B，需要创建同一个options的统计图，而不是create一个饼图！！！ 

8. 实现更新统计图

        目前劫持的操作有 xy、wh，options的更新劫持还有些没处理的BUG，我们简单说一下实现：

9. 实现删除统计图

10. 协同处理

        上面劫持了用户的创建、更新、删除操作，并发送了协同消息到服务端，但是，客户端并没有对协同消息做处理，现在来处理哈（server.js）：

协同插入

这里调用的是 render ，而不是 create 哈：用户A创建折线图，用户B也要创建折线图

协同更新

协同删除

总结

        简单分析了luckysheet 插件实现原理，处理依赖报错问题，通过 pugin.js、 handler.js 劫持用户创建、更新、删除统计图操作，发送协同数据；同时，新增了luckysheet 的全局API(createChart、updateChart、renderChart、deleteChart)，以及新增 controller/chart.js，用于处理统计图相关的操作。

        欢迎大家留言交流实现方案，这仅代表个人思路哈~ 有些BUG后续优化会同步更新到gitee，欢迎大家 fork 学习，多多 start ~~~