[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9294":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":37,"readmeContent":38,"aiSummary":39,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":40,"discoverSource":41},9294,"graphic","entronad\u002Fgraphic","entronad","A grammar of data visualization and Flutter charting library.","https:\u002F\u002Fpub.dev\u002Fpackages\u002Fgraphic",null,"Dart",1777,186,19,84,0,2,10,1,19.82,"MIT License",false,"main",true,[26,27,28,29,30,31,32,33,34,35,5,36],"chart","charting-library","charts","dart","dartlang","data-visualization","flutter","flutter-package","flutter-widget","graph","visualization","2026-06-12 02:02:05","# Graphic\n\n\u003Cp align=\"left\">\n\u003Ca href=\"https:\u002F\u002Fpub.dev\u002Fpackages\u002Fgraphic\">\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fgraphic.svg\" \u002F>\n\u003C\u002Fa>\n\u003C\u002Fp>\nGraphic is a grammar of data visualization and Flutter charting library.\n\n- **Flexible declarative grammar**: This visualization grammar derives from Leland Wilkinson's *The Grammar of Graphics*, and tries to balance between theoretical beauty and practicability. Data processing steps and mark shapes can be composed freely in a declarative specification, not limited to certain chart types. And shape draw methods are customizable.\n- **Interaction**: With the *event* and *selection* definition, the chart is highly interactive, such as highlighting selected items, popping a tooltip, or scaling the coordinate.\n- **Animation**: Mark transition animation can be set when a chart is built or changed. The entrance animation has various forms.\n\n## Skill for AI coding\n\nAdd the following skill, and your coding agent will be an expert of charting with this library:\n\n```\nnpx skills add https:\u002F\u002Fgithub.com\u002Fentronad\u002Fgraphic --skill flutter-chart\n```\n\nOr you can find the skill in `\u002Fskills\u002Fflutter-chart` of this repository.\n\n## Documentation\n\nSee in the [documentation](https:\u002F\u002Fpub.dev\u002Fdocumentation\u002Fgraphic\u002Flatest\u002Fgraphic\u002Fgraphic-library.html).\n\n(But in fact, I would prefer you to use the *skill* above for your coding agent.)\n\n## Examples\n\nExample of charts can be seen in the [Example App](https:\u002F\u002Fgithub.com\u002Fentronad\u002Fgraphic\u002Ftree\u002Fmain\u002Fexample). Please clone this repository and run the example project in example directory.\n\n\u003Cdiv align=\"center\">\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fentronad\u002Fgraphic\u002Fraw\u002Fmain\u002Fdevdoc\u002Fanimation1.gif\" width=\"40%\" height=\"40%\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fentronad\u002Fgraphic\u002Fraw\u002Fmain\u002Fdevdoc\u002Fanimation2.gif\" width=\"40%\" height=\"40%\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fentronad\u002Fgraphic\u002Fraw\u002Fmain\u002Fdevdoc\u002Fanimation3.gif\" width=\"40%\" height=\"40%\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fentronad\u002Fgraphic\u002Fraw\u002Fmain\u002Fdevdoc\u002Fanimation4.gif\" width=\"40%\" height=\"40%\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fentronad\u002Fgraphic\u002Fraw\u002Fmain\u002Fdevdoc\u002Fsignal_channel.gif\" width=\"40%\" height=\"40%\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fentronad\u002Fgraphic\u002Fraw\u002Fmain\u002Fdevdoc\u002Fselection_channel.gif\" width=\"40%\" height=\"40%\" \u002F>\n\u003C\u002Fdiv>\n\n![examples](https:\u002F\u002Fgithub.com\u002Fentronad\u002Fgraphic\u002Fraw\u002Fmain\u002Fdevdoc\u002Fexamples.jpg)\n\n## Tutorials\n\n[The Versatility of the Grammar of Graphics](https:\u002F\u002Fmedium.com\u002F@entronad\u002Fthe-versatility-of-the-grammar-of-graphics-d1366760424d)\n\n[How to Build Interactive Charts in Flutter](https:\u002F\u002Fmedium.com\u002F@entronad\u002Fhow-to-build-interactive-charts-in-flutter-e317492d5ba1)\n\n## Share this Lib\n\n[![Twitter](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fshare%20on-twitter-03A9F4?style=flat-square&logo=twitter)](https:\u002F\u002Ftwitter.com\u002Fshare?url=https:\u002F\u002Fgithub.com\u002Fentronad\u002Fgraphic&text=Graphic:%20A%20grammar%20of%20data%20visualization%20and%20Flutter%20charting%20library.)\n[![HackerNews](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fshare%20on-hacker%20news-orange?style=flat-square&logo=ycombinator)](https:\u002F\u002Fnews.ycombinator.com\u002Fsubmitlink?u=https:\u002F\u002Fgithub.com\u002Fentronad\u002Fgraphic)\n[![Reddit](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fshare%20on-reddit-red?style=flat-square&logo=reddit)](https:\u002F\u002Freddit.com\u002Fsubmit?url=https:\u002F\u002Fgithub.com\u002FKanaries\u002Fpygwalker&title=Graphic:%20A%20grammar%20of%20data%20visualization%20and%20Flutter%20charting%20library.)\n\n## License\n\nGraphic is [MIT License](https:\u002F\u002Fgithub.com\u002Fentronad\u002Fgraphic\u002Fblob\u002Fmain\u002FLICENSE).\n\n## Keep Informed\n\n[Twitter](https:\u002F\u002Ftwitter.com\u002Fentronad_viz)\n\n[Medium](https:\u002F\u002Fmedium.com\u002F@entronad)\n\n[Zhihu](https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fentronad)\n\nThanks for reading.\n","Graphic 是一个基于 Flutter 的数据可视化和图表库。它采用了灵活的声明式语法，源自 Leland Wilkinson 的《图形语法》，允许用户自由组合数据处理步骤和标记形状，不仅限于特定类型的图表，并支持自定义形状绘制方法。此外，该库还提供了丰富的交互功能（如高亮、提示框显示等）和动画效果（包括进入动画和过渡动画）。适合需要在 Flutter 应用中实现高质量、可交互的数据可视化场景使用。","2026-06-11 03:22:03","top_language"]