阿里巴巴图表库 Bizcharts 正式开源
写在前面
阿里巴巴于去年开放了它的内部图表库 Bizcharts 初版,在这一年的时间里,Bizcharts 新增了许多特性,并对渲染细节及渲染性能进行大幅度的调优。
本文将简单的介绍阿里开源图表库 Bizcharts,主要分为以下几个方面:
它的由来
适合什么业务场景?
如何使用?
未来的规划
它的由来?
目前阿里基本上绝大部分业务的前端用的都是 React 技术栈,而在业务场景中又经常会有图表绘制的需求,所以一个 基于 React 技术栈的图表库 就显得非常必要,而在阿里内部又有像 G2 这样非常强大的图表底层引擎,所以在该引擎之上做一层封装是一件很自然而然的事情,而 Bizcharts 就是基于 G2 引擎的 React 版本的封装。
Bizcharts 的语法设计非常贴切 React 的使用方式,图表的各个部分都拆分成了独立的 React 类,如:<Tooltip />
代表提示信息, <Axis />
代表坐标轴。 所有图表的配置项皆为组件的 props 。
Bizcharts 在最新的 3.x 版本中,支持 Canvas 及 SVG 两种模式的图表渲染。如果单就图表库的视角来看,选择 Canvas 和 SVG 各有千秋,Bizcharts 两种方式都支持,适用于各种复杂的业务场景。
Bizcharts 在阿里内部多个部门多条业务线里反复打磨了两年之久后,于去年年底对外开源。在开源的半年时间里,做了大量的迭代优化,现在功能及性能已经做了大量的优化,非常推荐在正式环境使用。
适合什么业务场景?
阿里内部的业务非常复杂:电商业务,后台系统,业务大屏等等,这些业务对图表都有大量定制化的需求,并非简单的折线图柱状图就能满足,这也决定了 Bicharts 其中一个特性:支持自由定制化。同时,上文也介绍了阿里 95% 以上的业务前端用的都是 React 技术栈,所以总的来说 Bizcharts 适用的业务场景是『使用React 技术栈并有图表绘制需求场景』,从这个角度来说,Bizcharts 适用的业务场景是非常广的。相较于 Echarts 图表框架的高度封装,Bizcharts 能满足更多业务定制化需求。
如何使用?
Bizcharts 的 API 为 React 量身定制,使用起来就像搭积木的感觉一般。下面我们以画一个基础的柱状图为例讲解:
import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';// 数据源
const data = [{ genre: 'Sports', sold: 275, income: 2300 },{ genre: 'Strategy', sold: 115, income: 667 },{ genre: 'Action', sold: 120, income: 982 },{ genre: 'Shooter', sold: 350, income: 5271 },{ genre: 'Other', sold: 150, income: 3710 }
];// 定义度量
const cols = {sold: { alias: '销售量' }, // 数据字段别名映射genre: { alias: '游戏种类' }
};// 渲染图表
ReactDOM.render((<Chart width={600} height={400} data={data} scale={cols}>{/* X 轴 */}<Axis name="genre" />{/* Y 轴 */}<Axis name="sold" /><Legend position="top" dy={-20} /><Tooltip /><Geom type="interval" position="genre*sold" color="genre" /></Chart>
), document.getElementById('mountNode'));
下图是上述代码片段的渲染结果:
图表的每一块都是一个组件,需要什么就加什么,使用起来非常方便,再也不用担心产品经理需求实现不了了。
未来的规划
Bizcharts 本身自带了大量的 Demo,可以满足绝大部分的通用使用场景,使用的时候,只需要把 Demo 中的数据替换成自己业务中的数据即可,但即便如此,也无法完全覆盖到高度定制化的场景。当然,使用 Bizcharts 的用户可以通过查阅 官网 API 文档 来实现需求,但这样无形中加大了用户的学习成本。因为可能整个网站上只有一个简单的折现图,而且时间非常紧,需要快速实现,这个时候让用户去学习一个类库/框架的使用是非常蛋疼的。
根据上述情况,Bizcharts 接下来会推出一款产品:Chartmaker。简单来讲,它能够帮助你可视化的配置出你想要的图表:所见即所得,同时还能输出代码。有了 Chartmaker 后,就能够帮助数据可视化小白用户快速的实现自己想要的图表,无任何学习成本。目前 Chartmaker 正在紧张的开发中,预计十月初对外开放。
写在最后
Bizcharts 目前处于快速发展中,非常欢迎给项目提 Pull Request。也可以去 我们的官网 联系我们。
转载于:https://my.oschina.net/u/3956200/blog/1936482
阿里巴巴图表库 Bizcharts 正式开源相关推荐
- 丁香园样式库DXY-UI正式开源!
DXY-UI 是什么? 一套适用于桌面端的样式库,包含文本.列表.表格.表单.栅格系统等基础样式和十余个组件,兼容主流浏览器及IE10+. DXY-UI 专注于样式,不涉及组件,无"侵入性& ...
- 数据可视化,BizCharts图表库入坑历程
前言 作为一个前端打字员,除了绿茶婊之外,最讨厌的就是图表:一个让我伤心,一个让我难过:比这更讨厌的就是文档写得不清不楚的图表库(大概率是九年义务教育期间没有学好语文),让我又爱又恨!所以本篇博文会比 ...
- 图表库:ECharts 、 BizCharts 和 G2使用体验
阿里正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点.同时BizCharts基于G2进行封装,Bizcharts也继承了G2相关特性.公司 ...
- IBM J9 Java 虚拟机正式开源;PyPI 官方库被发现混入了名字相似的恶意模块
(点击上方蓝字,快速关注我们) 参考:开源中国.solidot.cnBeta.腾讯科技等 0.IBM J9 Java 虚拟机正式开源,贡献给 Eclipse 基金会管理 去年这个时候,IBM 曾宣布要 ...
- 【Android】开源图表库MPAndroidChart的学习
android开源图表库MPAndroidChart(中文翻译) MPAndroidChart简化版运行效果: 主要的Api方法: setDescription(String desc) : 设置表格 ...
- hellocharts-android开源图表库(效果非常好)
http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1107/1930.html 之前我们介绍了一个非常优秀开源图表库 MPAndroidCh ...
- 美观又实用,10 款强大的开源 Javascript 图表库
2019独角兽企业重金招聘Python工程师标准>>> 随着发展,现代 Web 设计在改善体验和功能的同时,对于美观的追求也越来越高,可视化.交互式.动态等元素和效果似乎已成为标配. ...
- 阿里巴巴云原生混部系统 Koordinator 正式开源
简介: 脱胎于阿里巴巴内部,经过多年双 11 打磨,每年为公司节省数十亿的混部系统 Koordinator 今天宣布正式开源.通过开源,我们希望将更好的混部能力.调度能力开放到整个行业,帮助企业客户改 ...
- android开源动态图表库,hellocharts-android-Android图表开源库的使用(一)
最近项目中需要用到图表,技术有限,自己实现起来有难度,于是对比之后,最终决定使用hellocharts这个开源库,传送门:https://github.com/lecho/hellocharts-an ...
- 重磅!阿里巴巴Blink正式开源,重要优化点解读\n
喜大普奔!阿里巴巴终于在今天正式放出了内部Flink版本Blink的开源项目地址! 在1个月前的Flink Forward China峰会上,阿里巴巴集团副总裁周靖人宣布Blink 将于2019 年1 ...
最新文章
- 【神经网络】(2) 网络优化,案例:服装图像分类,附python完整代码
- 音频数据建模全流程代码示例:通过讲话人的声音进行年龄预测
- 【Paper】2021_Analysis of the Consensus Protocol of Heterogeneous Agents with Time-Delays
- 关于Net开发中一些SQLServer性能优化的建议
- 排序算法html,排序算法总结.html
- 第一步:Axure 使用svn多人协作产品开发(提交文件)
- java 共享锁 独占锁_java中的公平锁、非公平锁、可重入锁、递归锁、自旋锁、独占锁和共享锁...
- 含有swap的c语言冒泡排序6,c#中写个Swap方法来实现冒泡排序 看看哪里错了
- 奇安信代码卫士帮助微软修复严重漏洞,获官方致谢和奖金
- 那些年的UC人力外包扯淡
- 学生选课管理系统(下)
- 云平台仿真框架cloudsim介绍
- Windows内网渗透之信息收集
- 美团点评旅游搜索召回策略的演进
- jquery ligerui php,jQuery LigerUI操作表格
- AI 考古比胡八一更高效
- java 订单号生成器
- onsubmit和submit()详解
- R与Excel之数据分析
- 区块链技术+二维码,打造爱码物联产品质量溯源软件
热门文章
- 百度地图生成器,图标消失,中文乱码和自定义名字undefind
- 大华嵌入式笔试总结-提前批+正式批(已offer)
- 超级高铁(Hyperloop)
- C#根据银行卡号获取银行
- basemap库安装教程
- 自己总结的ITTO规律-PMP
- 数值计算之 梯度向量和梯度矩阵,雅可比矩阵,海森矩阵
- 【计算理论】计算理论总结 ( 非确定性有限自动机 NFA 转为确定性有限自动机 DFA ) ★★
- android版自动点击器,自动点击器安卓低配版
- fanuc机器人与示教器配对_FANUC机器人示教器维修