MichealWayne / FundCharts

轻量级canvas数据可视化组件库(可在web移动端、微信小程序、服务端nodejs运行)。包含折线图/面积图、饼图/环形图、柱状图、雷达图(蜘蛛图),散点图,K线图,组合图,持续更新及维护。

Home Page:http://blog.michealwayne.cn/FundCharts/docs/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

FundChartsJS 轻量数据可视化库

npm package

文档>>English/npm

轻量级canvas数据可视化组件库,可在web端/小程序端/服务端nodjes运行。核心原则:轻量只注重图形。 目前包含折线图、面积图、饼图、柱状图、雷达图(蜘蛛图)、雷达图、散点图、K线图,开放图形组合接口。(codepen demo:https://codepen.io/michealwayne/

注:对于有canvas开发基础经验的人员来说,通过实例的再次绘制可以完全实现特殊的可视化定制效果。

向导

目录结构

FundCharts
├─dist       FundCharts单例
│   ├─react.d.ts      ts声明文件
│   ├─vue.d.ts        ts声明文件
│   ├─index.d.ts        ts声明文件
│   ├─react.js        ReactJs组件
│   ├─vue.js          VueJs组件
│   ├─BarChart.js     柱状图
│   ├─KlineChart.js   K线图
│   ├─LineChart.js    折线图/面积图		  
│   ├─PieChart.js     饼图/环形图
│   ├─RadarChart.js   雷达图(蜘蛛图)
│   └─ScatterChart.js 散点图
├─toolTips   图表提示辅助组件
├─demo       使用案例
├─docs       文档
├─versions   历史版本
├─FundCharts.min.js   FundCharts,web/weapp端使用库
├─FundCharts.tooltips.js   FundCharts ToolTips插件
└─FundCharts-node.js  FundCharts,nodejs端使用库

特性

  • 重图形:只注重图形的可视化实现,画布以及换算提供全面接口供二次绘制。
  • 轻量级:体积小无依赖,全量直接引用仅30k,开启gzip仅10.8k;按需引用打包体积更小。
  • 兼容好:小程序端;web Android4及以上,ios8及以上;nodejs8.0及以上。

兼容:

browser

  • ios8及以上
  • android 4及以上
  • PC IE9+/Firefox/Opera/Chrome/Safari12+

注:与框架无冲突,配有React/Vue组件v0.9.10起支持 TypeScript 直接使用。

weapp

  • 兼容

server

  • nodejs v8.0+

最新版本

(历史版本访问FundCharts-versions

更新信息

  • 2022.02.05(v0.9.11): 修复line面积渐变bug,options边界bug;增加实例内存销毁方法destory();
  • 2021.09.25(v0.9.10):增加声明文件以支持TypeScript;增加ToolTip的集成;
  • 2021.06.20(v0.9.9):修复微信小程序注册bug。
  • 2021.06.08(v0.9.8):修复计算bug;优化代码。
  • 2020.09.08(v0.9.7):增加图表提示辅助组件ToolTips;FundCharts适配ToolTips。
  • 2020.02.28(v0.9.6):修复特殊情况下饼图Pie的间距bug;柱状图增加堆叠效果(多数据项)。
  • 2019.12.20(v0.9.5):增加React/Vue组件;Pie/Radar设置origin时不需要x,y必填。
  • 2019.10.28(v0.9.4):背景默认透明('#fff' -> rgba(0,0,0,0));折线图line初始动画方式替换,交互超出边界处理调整(执行onFinish,展示边界值);散点图增加圆点边框半径控制borderRate。
  • 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。
  • 2019.08.23(v0.9.2):优化line/pie/radar/bar的update切换过渡动画;折线图line增加曲线展示(curveLine);k线图增加空心展示控制(upHollow)。
  • 2019.07.18(v0.9.1):增加柱状图/k线图/饼图/环形图/雷达图交互反馈;web端可直接在canvas元素上绘制;修复雷达图坐标及小程序网格bug,修复小程序hover抖动bug;
  • 2019.06.20(v0.9.0):增加k线图;增加小程序动画;修复柱状图xaxis bug;开放x/y轴文案处理函数(handleTextX/handleTextY);
  • 2019.06.10(beta):修复部分bug(折线图/柱状图单点数据);
  • 2019.05.05(beta):增加散点图;新增图形区域控制、动画执行回调等参数控制;
  • 2019.04.16(beta):增加雷达图(蜘蛛图);柱状图修复负值控制;取消线性动画函数选择;
  • 2019.04.08(beta):折线图增加粗细控制、虚线可选等参数设置;画布背景色可设置;
  • 2019.03.15(beta):新增小程序端/nodejs服务端支持;

使用

文档-FundCharts的安装和使用

图形配置

文档-FundCharts图形及配置

启动查看测试demo

github-demos

combo1.jpg combo2.jpg

line.gif pie.gif

其他

默认颜色组

'#fe5d4e',   // 红
'#43c2f7',   // 蓝
'#707ad9',   // 深蓝
'#ffa61b',   // 橙
'#64d290',   // 青
'#cf27bd'    // 紫  

colorArray

About

轻量级canvas数据可视化组件库(可在web移动端、微信小程序、服务端nodejs运行)。包含折线图/面积图、饼图/环形图、柱状图、雷达图(蜘蛛图),散点图,K线图,组合图,持续更新及维护。

http://blog.michealwayne.cn/FundCharts/docs/


Languages

Language:TypeScript 86.2%Language:JavaScript 13.8%