欢迎光临杨雨的葡京赌场站!

杨雨个人网站-杨雨葡京赌场-杨照佳

杨雨葡京赌场网站

关注互联网和搜索引擎的葡京赌场网站

首页 > 分享 >

绘制数据图表的又一利器:C3.js

发布时间:2015-07-28  编辑:杨雨葡京赌场网站   点击:   

许多人是数据控,个中又有许多人是图标控,看到一个个计划精细的图标在网页上腾挪移动不知戳到了几多人的飞腾点。本日,我们就来总结几个好用的Chart libraries并谨慎保举C3.js(假如你已经想到D3的话,声名你懂的,么么哒)。对了,许多非凡目标的库许多(譬喻专门做Sankey,专门做GeoInfo的),但本日我们首要讲的C3则包围大大都charts的库。

这里是我行使过的几个,目前天会突出讲D3 & C3:

D3.js / C3.js

Chart.js

Google Chart Tools

HighChart

NVD3

D3.js

D3.js可以说是数据可视化做的最完备最伟大而展示结果也最引人入胜的一个库,诸多的研究机构、数据机构及开拓者都很钟情于它。可是假如你真正地试用这个库,你会发明它并不是一个很简朴的数据可视化器材,它更多地提供了一个数据化清算的布局成果。其它,它并不是基于jQuery或其他的底层js libraries,它自己就带有直接和DOM做交换的成果,因此一些教程说其基于a, b, c, …都是错误的。更好地相识它的代价,你也可以阅读我挚友写的一篇文章:What D3.js is Not。

D3.js是基于SVG的,因此老赏识器在支持上是要思密达的,详细环境请看:

caniuse - svg

假如想要实现一个简朴的柱状图,可以通过数据直接天生DOM中的SVG元素,从而实现可视化的结果。因此,诸多D3.js样式上的烂漫要归功于SVG自己的强盛。

// dataset: an array of integers // svg: a <svg>...</svg>宽500, 高100 var svg = d3.select('#content').append('svg') .attr('width', 500) .attr('height', 100); // bars svg.selectAll('rect').data(dataset).enter().append('rect') .attr({ x: function(d, i) {return i * (w / dataset.length);}, y: function(d) {return h - d;}, width: (w / dataset.length - barPadding), height: function(d) {return d;}, fill: function(d) {return 'rgb(0,0,' + d * 3 + ')'; } });

这会天生一个简朴的柱状图:

selectAll(‘rect’):要选中此svg中全部的长方体

data(dataset):做binding

enter():对每一个数据举办操纵

append(‘rect’):按照每一个数据天生一个<rect>元素

attr({…}):修改每一个长方体的样式

这样就能天生如下样式:

C3.js

简述了D3之后呢,我们就来看看C3是奈何让这个Charting的进程越发轻盈的,对付上面这个柱状图,在C3中应该云云实现:

var chart = c3.generate({ data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250] ], type: 'bar' }, bar: { width: { ratio: 0.5 // this makes bar width 50% of length between ticks } } });

c3 bar

这里在天生进程中可以自动添加、镌汰数据分类同时提供诸多的data binding的动画结果。而与D3差异的是,这里的坐标系、label等图表相干元素会自动添加,而D3则必要本身写code来render。可以说,C3就是基于D3的一个真正的Charting library。

其他

着实Charting Tools尚有许多,有看起来并不吸引人的传统industry较量必要的版本,也有看上去很fancy的样式。我用的最多的应该就是NVD3和Chart.js(请叫我概况协会)。

NVD3同样是基于D3.js的库,它支持line chart, scatter,area chart, bar chart, pie chart和bullet,样式上也同样简捷。可是这个库可以说是D3和C3的中间层,它封装了一部门D3底层数据操纵从而提供了更简朴的图标保留interface,可是在实现图标上更多操纵时着实照旧在和D3直接交换,实现坚苦。

Chart.js则并不是基于SVG,而是基于Canvas的,因而在responsive, style control和interactions上比svg这样直接和DOM操纵更难。假如你感乐趣也可以实行Paper.js。Chart.js支持line chat, bar chart, radar chart, polar area和pie。因为本身的措施必要,我曾经阅读了这个库的source code,许多的碰撞实现尚稀有据变革后的动画结果都是可以编译的,痛惜此刻的docs写的并不developer friendly。(可以和我多聊这个,我有乐趣哦)

最其后办理一个许多人问过我的题目,Canvas和SVG到底有什么区别,该怎么用:(一表胜千言)

canvas vs svg

本文地址:http://itbyc.com/share/2658.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1