README_zh.md

datart-extension-charts

这里是 Datart 插件图表仓库，当前的图表是实验阶段，请勿用于生产环境。

🖖 欢迎提 Pull Rquest 以及 Issue，请不要担心问题过于直白或者初级，任何反馈均是贡献 👏.

如果你是一位使用者

1. 从dist文件夹中拷贝出你所需要的插件图表，如datart-amap.iife.js这个给予高德地图的插件图表
2. 将拷贝出的插件图表粘贴到你的datart服务端的custom-chart-plugins目录下
3. 登陆 datart 系统，然后选择你所导入的插件图表

如果你是一位开发者

当前的仓库提供了基于命令行的工具，提升开发效率。

1. 制作 IIFE 类型的插件图表 （推荐）

立即调用函数表达式（英文：immediately-invoked function expression，缩写：IIFE）[1]，是一种利用JavaScript函数生成新作用域的编程方法。

1. 创建一个以datart-开头的文件夹，如datart-hello-world文件夹
2. 创建一个 Javascript or Typescript 文件
3. 导出一个包含 datart 生命周期的函数对象，生命周期¹例如onMount、onUpdated等.
4. 运行npm run build 命令，并且查看dist文件夹新生成的datart-hello-world.iife.js文件

注意：插件图表文件夹的名称必须以datart-开头，这样当运行build命令时可自动打包文件

2. 制作 React 类型的插件图表

请查看plugins文件夹📁下面的图表示例

Sample

Antv/G2

BabylonJS

ChartJS

ThreeJS-BingDunDun

ThreeJS-WebGL

ECharts-Time

Mermaid-UML

VueJS

ZRender

更多文章链接

• Plugin Chart Helper API document: https://running-elephant.github.io/datart-docs/api/
• How to Make a Plugin Chart: https://running-elephant.github.io/datart-docs/docs/chart_plugin.html
• How to Make Chart Config: https://juejin.cn/post/7040683275446124574
• Vue 跑马灯插件示例: https://mp.weixin.qq.com/s/a4DVf-5LHVQAknmKKE6DJA
• JQuery 图表插件：https://mp.weixin.qq.com/s/9hBNSla86Fzouy0WdXqSQQ
• 手把手教你开发出优秀的图表插件作品： https://mp.weixin.qq.com/s/nYMAaiT97NPkm71FpW8LSw

Footnotes

1. https://running-elephant.github.io/datart-docs/docs/chart_plugin.html ↩