README.md

datart-extension-charts

An extension repository to host datart plugin charts which is in experiment state not officially🤝.

🖖 Welcome PRs or Issues, please don't be worry about any questions 👏.

By Consumer

1. Copy plugins from dist folder, eg. datart-amap.iife.js file.
2. Paste to your datart backend server folder of custom-chart-plugins
3. Login datart, and select a your custom plugin chart.

By Developer

With this project, you can make yourself plugin chart and bundle with CLI.

1. Cook plugin chart as IIFE type (Recommended)

IIFE also called Immediately Invoked Function Expression¹, a programming language idiom which produces a lexical scope using function scoping.

1. Create a folder prefixed with datart-, such as datart-hello-world.
2. Create a plugin chart with Javascript or Typescript file
3. Plugin chart should be export an object with datart lifecycles², such as onMount、onUpdated and etc.
4. Run npm run build and then check dist folder with file datart-hello-world.iife.js. NOTE: Plugin folder should be prefix as datart-* which could be automatic load when run build

2. Cook plugin chart as an React Component

Please take a look plugins folder

Sample

Antv/G2

BabylonJS

ChartJS

ThreeJS-BingDunDun

ThreeJS-WebGL

ECharts-Time

Mermaid-UML

VueJS

ZRender

More Posts

• 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 Carousel Plugin Chart:https://mp.weixin.qq.com/s/a4DVf-5LHVQAknmKKE6DJA
• JQuery Plugin Chart：https://mp.weixin.qq.com/s/9hBNSla86Fzouy0WdXqSQQ
• Hand by hand develop a plugin chart： https://mp.weixin.qq.com/s/nYMAaiT97NPkm71FpW8LSw

Footnotes

1. https://en.wikipedia.org/wiki/Immediately_invoked_function_expression ↩

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