5.12. 自定义图表插件

  1. 编写插件

    新建一个UTF-8编码的plugin.json文件,格式为:

    1. {
    2. id: "...", //插件唯一标识
    3. nameLabel: "...", //插件展示名称
    4. dataSigns: //插件的数据标记定义,用于新建图表时标记数据
    5. [
    6. {
    7. name: "...", //数据标记名
    8. nameLabel: "...", //数据标记展示名
    9. required: ..., //是否必须标记
    10. multiple: ... //是否可多次标记
    11. },
    12. ...
    13. ],
    14. chartRenderer: //图表渲染器
    15. {
    16. asyncRender: //声明render函数是否为异步,可选,默认为false
    17. true || false || function(chart){ return true || false },
    18. render: function(chart)
    19. {
    20. ... //这里编写初始化图表元素JS代码
    21. //chart.elementJquery().append("render");
    22. },
    23. asyncUpdate: //声明update函数是否为异步,可选,默认为false
    24. true || false || function(chart, results){ return true || false },
    25. update: function(chart, results)
    26. {
    27. ... //这里编写更新图表数据JS代码
    28. //chart.elementJquery().append("update");
    29. }
    30. }
    31. }

    将上述plugin.json文件添加到以其id值命名的ZIP压缩包内,例如:

    my-chart-plugin-line.zip

    1. |--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.***函数说明。

  2. 上传插件

    以管理员账号登录系统后,点击主页右上角的按钮, 点击弹出菜单中的上传图表插件条目,打开上传页面后,将上述的自定义图表插件ZIP压缩包上传即可。

  3. 使用插件

    在图表管理页面点击[添加]按钮,选择上述自定义的图表插件,新建图表即可。