9.10 自定义图表插件
编写插件
新建一个UTF-8编码的plugin.json文件,格式为:
- {
- id: "...", //插件唯一标识
- nameLabel: "...", //插件展示名称
- dataSigns: //插件的数据标记定义,用于新建图表时标记数据
- [
- {
- name: "...", //数据标记名
- nameLabel: "...", //数据标记展示名
- required: ..., //是否必须标记
- multiple: ... //是否可多次标记
- },
- ...
- ],
- chartRenderer: //图表渲染器
- {
- asyncRender: //声明render函数是否为异步,可选,默认为false
- true || false || function(chart){ return true || false },
- render: function(chart)
- {
- ... //这里编写初始化图表元素JS代码
- //chart.elementJquery().append("render");
- },
- asyncUpdate: //声明update函数是否为异步,可选,默认为false
- true || false || function(chart, results){ return true || false },
- update: function(chart, results)
- {
- ... //这里编写更新图表数据JS代码
- //chart.elementJquery().append("update");
- }
- }
- }
将上述plugin.json文件添加到以其id值命名的ZIP压缩包内,例如:
my-chart-plugin-line.zip
- |--plugin.json
注意:如果chartRenderer.asyncRender返回true, 那么在chartRenderer.render函数中完成异步操作后, 应该调用chart.statusPreUpdate(true);,表明已完成render。
注意:如果chartRenderer.asyncUpdate返回true, 那么在chartRenderer.update函数中完成异步操作后, 应该调用chart.statusUpdated(true);,表明已完成update。
chart对象上定义了很多有用的函数, 包括获取图表元素、绘制echarts图表、 获取指定数据标记(上述dataSigns定义的项)的数据、 以及其他图表相关的常用API。
具体参考datagear-chartFactory.js中的chartBase.***函数说明。上传插件
以管理员账号登录系统后,点击主页右上角的按钮, 点击弹出菜单中的上传图表插件条目,打开上传页面后,将上述的自定义图表插件ZIP压缩包上传即可。
使用插件
在图表管理页面点击[添加]按钮,选择上述自定义的图表插件,新建图表即可。