{"id":15391885,"url":"https://github.com/michealwayne/fundcharts","last_synced_at":"2025-04-09T19:16:52.258Z","repository":{"id":34932979,"uuid":"158645335","full_name":"MichealWayne/FundCharts","owner":"MichealWayne","description":"轻量级canvas数据可视化组件库（可在web移动端、微信小程序、服务端nodejs运行）。包含折线图/面积图、饼图/环形图、柱状图、雷达图（蜘蛛图），散点图，K线图，组合图，持续更新及维护。","archived":false,"fork":false,"pushed_at":"2023-01-08T01:50:37.000Z","size":2991,"stargazers_count":177,"open_issues_count":7,"forks_count":35,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-09T19:16:47.239Z","etag":null,"topics":["canvas","canvas-web","charts","js","mobile-web","nodejs","wechat-app"],"latest_commit_sha":null,"homepage":"http://blog.michealwayne.cn/FundCharts/docs/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MichealWayne.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-22T05:11:37.000Z","updated_at":"2025-03-10T03:59:07.000Z","dependencies_parsed_at":"2023-01-15T10:41:48.917Z","dependency_job_id":null,"html_url":"https://github.com/MichealWayne/FundCharts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichealWayne%2FFundCharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichealWayne%2FFundCharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichealWayne%2FFundCharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichealWayne%2FFundCharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MichealWayne","download_url":"https://codeload.github.com/MichealWayne/FundCharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248094988,"owners_count":21046770,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","canvas-web","charts","js","mobile-web","nodejs","wechat-app"],"created_at":"2024-10-01T15:13:25.556Z","updated_at":"2025-04-09T19:16:52.234Z","avatar_url":"https://github.com/MichealWayne.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FundChartsJS 轻量数据可视化库\n\n\u003ca href=\"http://blog.michealwayne.cn/FundCharts/docs/\"\u003e\n  \u003cimg style=\"width: 100%\" src=\"https://blog.michealwayne.cn/images/fundchartspics/bg.png\"/\u003e\n\u003c/a\u003e\n\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/fundcharts\" rel=\"nofollow\"\u003e\u003cimg src=\"https://blog.michealwayne.cn/FundCharts/docs/assets/img/npm.91127fd2.svg\" alt=\"npm package\" data-canonical-src=\"./images/npm.svg\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n**[文档\u003e\u003e](http://blog.michealwayne.cn/FundCharts/docs/)**，[English/npm](https://www.npmjs.com/package/fundcharts)\n\n轻量级canvas数据可视化组件库，可在web端/小程序端/服务端nodjes运行。核心原则：**轻量**，**只注重图形**。\n目前包含折线图、面积图、饼图、柱状图、雷达图（蜘蛛图）、雷达图、散点图、K线图，开放图形组合接口。（codepen demo：[https://codepen.io/michealwayne/](https://codepen.io/michealwayne/)）\n\n\u003e 注：对于有canvas开发基础经验的人员来说，通过[实例的再次绘制](https://blog.michealwayne.cn/FundCharts/docs/twiceDraw/#%E4%BA%8C%E6%AC%A1%E7%BB%98%E5%88%B6)可以完全实现特殊的可视化定制效果。\n\n### 向导\n- [开始](http://blog.michealwayne.cn/FundCharts/docs/guide/)\n- [图形](http://blog.michealwayne.cn/FundCharts/docs/graphs/)\n    - [折线图/面积图](http://blog.michealwayne.cn/FundCharts/docs/graphs/#折线图-面积图：line)\n    - [饼图/环形图](http://blog.michealwayne.cn/FundCharts/docs/graphs/#饼图-环形图：pie)\n    - [柱状图](http://blog.michealwayne.cn/FundCharts/docs/graphs/#柱状图：bar)\n    - [雷达图/蜘蛛图](http://blog.michealwayne.cn/FundCharts/docs/graphs/#雷达图（蜘蛛图）：radar)\n    - [散点图](http://blog.michealwayne.cn/FundCharts/docs/graphs/#散点图：scatter)\n\t- [K线图](http://blog.michealwayne.cn/FundCharts/docs/graphs/#k线图：kline)\n\t- [图形合并](http://blog.michealwayne.cn/FundCharts/docs/graphs/#图形合并)\n- [二次绘制](http://blog.michealwayne.cn/FundCharts/docs/twiceDraw/)\n- [ToolTips](http://blog.michealwayne.cn/FundCharts/docs/tooltips/)\n- [小程序](http://blog.michealwayne.cn/FundCharts/docs/weapp/)\n- [nodejs服务端](http://blog.michealwayne.cn/FundCharts/docs/nodejs/)\n\n\n### 目录结构\n\n```\nFundCharts\n├─dist       FundCharts单例\n│   ├─react.d.ts      ts声明文件\n│   ├─vue.d.ts        ts声明文件\n│   ├─index.d.ts        ts声明文件\n│   ├─react.js        ReactJs组件\n│   ├─vue.js          VueJs组件\n│   ├─BarChart.js     柱状图\n│   ├─KlineChart.js   K线图\n│   ├─LineChart.js    折线图/面积图\t\t  \n│   ├─PieChart.js     饼图/环形图\n│   ├─RadarChart.js   雷达图（蜘蛛图）\n│   └─ScatterChart.js 散点图\n├─toolTips   图表提示辅助组件\n├─demo       使用案例\n├─docs       文档\n├─versions   历史版本\n├─FundCharts.min.js   FundCharts，web/weapp端使用库\n├─FundCharts.tooltips.js   FundCharts ToolTips插件\n└─FundCharts-node.js  FundCharts，nodejs端使用库\n\n```\n\n### 特性\n\n- **重图形**：只注重图形的可视化实现，画布以及换算提供全面接口供二次绘制。\n- **轻量级**：体积小无依赖，全量直接引用仅30k，开启gzip仅10.8k；按需引用打包体积更小。\n- **兼容好**：小程序端；web Android4及以上，ios8及以上；nodejs8.0及以上。\n\n兼容：\n\n### browser\n\n- ios8及以上\n- android 4及以上\n- PC IE9+/Firefox/Opera/Chrome/Safari12+\n\n\u003e 注：与框架无冲突，配有[React/Vue组件](https://blog.michealwayne.cn/FundCharts/docs/guide/#react-vue使用)。`v0.9.10`起支持 TypeScript 直接使用。\n\n### weapp\n\n- 兼容\n\n### server\n\n- nodejs v8.0+\n\n## 最新版本\n\n- [v0.9.11](https://www.npmjs.com/package/fundcharts)\n\n（历史版本访问[FundCharts-versions](https://github.com/MichealWayne/FundCharts/tree/master/versions)）\n\n## 更新信息\n- 2022.02.05(`v0.9.11`): 修复line面积渐变bug，options边界bug；增加实例内存销毁方法destory()；\n- 2021.09.25(`v0.9.10`)：增加声明文件以支持TypeScript；增加ToolTip的集成；\n- 2021.06.20(`v0.9.9`)：修复微信小程序注册bug。\n- 2021.06.08(`v0.9.8`)：修复计算bug；优化代码。\n- 2020.09.08(`v0.9.7`)：增加图表提示辅助组件ToolTips；FundCharts适配ToolTips。\n- 2020.02.28(`v0.9.6`)：修复特殊情况下饼图Pie的间距bug；柱状图增加堆叠效果（多数据项）。\n- 2019.12.20(`v0.9.5`)：增加React/Vue组件；Pie/Radar设置origin时不需要x,y必填。\n- 2019.10.28(`v0.9.4`)：背景默认透明('#fff' -\u003e `rgba(0,0,0,0)`)；折线图line初始动画方式替换，交互超出边界处理调整（执行onFinish，展示边界值）；散点图增加圆点边框半径控制borderRate。\n- 2019.09.20(`v0.9.3`)：增加图形合并：line和kline、bar和line可以组合。grid(line/bar/scatter/kline)：增加x/y坐标轴线显示控制(grid.showGrid)、增加x/y轴网格数量控制(xTickLength/yTickLength)、hover回调参数增加touchEvent的y坐标值。所有图形增加动画时长控制(duration)。饼/环形pie：增加起始角度控制(startAngle)。饼/环形/雷达图pie/radar：触控交互区域进行范围限制。折线line：修复update()特殊调用情景的bug。柱状图bar：修复barWidth失效bug。\n- 2019.08.23(`v0.9.2`)：优化line/pie/radar/bar的update切换过渡动画；折线图line增加曲线展示(curveLine)；k线图增加空心展示控制(upHollow)。\n- 2019.07.18(`v0.9.1`)：增加柱状图/k线图/饼图/环形图/雷达图交互反馈；web端可直接在canvas元素上绘制；修复雷达图坐标及小程序网格bug，修复小程序hover抖动bug；\n- 2019.06.20(`v0.9.0`)：增加k线图；增加小程序动画；修复柱状图xaxis bug；开放x/y轴文案处理函数（handleTextX/handleTextY）；\n- 2019.06.10(`beta`)：修复部分bug(折线图/柱状图单点数据)；\n- 2019.05.05(`beta`)：增加散点图；新增图形区域控制、动画执行回调等参数控制；\n- 2019.04.16(`beta`)：增加雷达图（蜘蛛图）；柱状图修复负值控制；取消线性动画函数选择；\n- 2019.04.08(`beta`)：折线图增加粗细控制、虚线可选等参数设置；画布背景色可设置；\n- 2019.03.15(`beta`)：新增小程序端/nodejs服务端支持；\n\n\n## 使用\n\n[文档-FundCharts的安装和使用](https://blog.michealwayne.cn/FundCharts/docs/guide/#安装和使用)\n\n## 图形配置\n\n[文档-FundCharts图形及配置](https://blog.michealwayne.cn/FundCharts/docs/graphs/#折线图-面积图：line)\n\n## 启动查看测试demo\n\n[github-demos](./demo/)\n\n\n\u003cp\u003e\n\u003ca href=\"https://github.com/MichealWayne/FundCharts/tree/master/demo\"\u003e\n  \u003cimg style=\"width: 375px\" src=\"https://blog.michealwayne.cn/images/fundchartspics/guide/p-1.jpg\" alt=\"combo1.jpg\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/MichealWayne/FundCharts/tree/master/demo\"\u003e\n  \u003cimg style=\"width: 375px\" src=\"https://blog.michealwayne.cn/images/fundchartspics/guide/p-2.jpg\" alt=\"combo2.jpg\"/\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\u003cp\u003e\n\u003ca href=\"https://github.com/MichealWayne/FundCharts/tree/master/demo\"\u003e\n  \u003cimg style=\"width: 375px\" src=\"https://blog.michealwayne.cn/images/fundchartspics/gifs/line.gif\" alt=\"line.gif\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/MichealWayne/FundCharts/tree/master/demo\"\u003e\n  \u003cimg style=\"width: 375px\" src=\"https://blog.michealwayne.cn/images/fundchartspics/gifs/pie.gif\" alt=\"pie.gif\"/\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n\n## 其他\n\n### 默认颜色组\n\n```\n'#fe5d4e',   // 红\n'#43c2f7',   // 蓝\n'#707ad9',   // 深蓝\n'#ffa61b',   // 橙\n'#64d290',   // 青\n'#cf27bd'    // 紫  \n```\n\n![colorArray](https://blog.michealwayne.cn/images/fundchartspics/colors.png)\n\n\n\n- 反馈：[michealwayne@163.com](mailto:michealwayne@163.com)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichealwayne%2Ffundcharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichealwayne%2Ffundcharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichealwayne%2Ffundcharts/lists"}