图表

简介: 引用:http://www.williamlong.info/archives/3372.html 在很多项目中都会有在前端展现数据图表的需求,而在开发过程中,开发者往往会使用一些JavaScript库,从而更有效地达到想要的目标。

引用:http://www.williamlong.info/archives/3372.html

在很多项目中都会有在前端展现数据图表的需求,而在开发过程中,开发者往往会使用一些JavaScript库,从而更有效地达到想要的目标。最近,TechSlide上的一篇文章总结了50种用于展现图表的JavaScript库,并对每种库做了简要的说明。这对于想要选择合适JavaScript库的开发者很有参考意义。

  文章作者首推的库是D3,他说到:

  它非常让人惊叹,我很喜欢它的简洁性。它的文档非常完备,源代码托管在GitHub上,而且不断会添加新的示例。有一种叫做Tributary的创建D3原型的工具,其中有很多非常棒的示例。这个库非常好,以至于xcharts、nvd3、Rickshaw、Cubism.js、dc.js、xkcd都是基于它构建的。如果你想要做出优秀的自定义数据可视化效果,那么D3可能是你最佳选择,或者对于更简单的图,你可以选择上面所提到的基于D3的库。最后,我强烈推荐阅读Scott Murray关于D3的免费书《Interactive Data Visualization for the Web》和《Dashing D3 tutorials》。

  接下来,他列举并简要说明了其它用于展现数据、制作表格和图表的JavaScript库,列在前20位的如下:

  • HighCharts——它非常强大,你可以在JSFiddle中查看和编辑大量示例。它不免费,但拥有很多客户(IBM、NASA、MasterCard等)。它还向下兼容IE 8。
  • jqPlot——如果你已经在使用jQuery,不想为HighCharts付费,而且情况很简单,不需要D3那样复杂的库,那么jqPlot是很好的选择。
  • dygraphs——一种开源的JavaScript库,可以做出可交互、可缩放的时间线图表。对于大数据集合非常适用。
  • Protovis——和D3出自同一支团队之手,是一种免费的开源库。你可以查看这个stackoveflow 页面来了解D3与其的区别。
  • Flot Charts——与jqPlot一样,Flot是一种针对jQuery的纯JavaScript库,专注于简单的用法、引人注目的外观和交互特性。
  • Google Chart Tools——强大、免费、易于使用。内容丰富,从最简单的线状图到负责的层级树状图都有,在展示页面中提供了大量设计良好的图表类型。
  • dc.js——基于D3的JavaScript图表库,拥有本地跨过滤器(crossfilter)的支持,并让你可以高效率地浏览大型多维数据集。
  • xcharts——基于D3用于构建自定义图表的库。
  • nvd3——让你可以构建可重用的图表和图表组件,同时具有d3.js的强大功能。
  • rickshaw——用于创建可交互时间线图表的JavaScript工具。
  • Cubism.js——用于可视化时间线的D3插件。使用了Cubism构建更好的实时仪表盘,可以从Graphite、Cube和其他源拉取数据。
  • xkcd——让你可以使用D3在JavaScript中做出XKCD样式的图表。
  • jQuery Sparklines——一种jQuery插件,可以直接在浏览器中创建小型的内嵌图表。
  • peity——一种简单的jQuery插件,可以把元素的内容转换成简单的饼图、线图和柱状图。
  • BonsaiJS——一种轻量级的图形库,拥有直观的图形API和SVG渲染器。
  • Flotr——为Prototype.js所用的JavaScript图表库。它拥有很多特性,像对负数值的支持、鼠标跟踪、选定支持、缩放支持、事件挂钩、CSS样式支持、在画布(canvas)中包含文字、旋转的标签、渐变颜色、图形标题和子标题、电子表格、CSV数据下载等等。
  • ProtoChart——物如其名,ProtoChart让你可以使用JavaScript和Prototype创建很漂亮的图表。它是一种开源库。
  • Flotr2——HumbleSoftware当前正在做的项目,让你可以使用Canvas和JavaScript创建图表。
  • jQuery-Visualize——HTML的table元素驱动的HTML5 canvas图表。也是针对jQuery的图表插件。
  • JS Charts——基于JavaScript的图表生成器,只需要很少甚至不需要编码。免费版会有水印,可以通过付费去掉。
  • ……

  文章中还列举的JavaScript库有:PlotKitMilkChartmoochartmoowheeltable2chartCanvas 3D GraphTufteGraphArborJSTimePlotgRaphaelICOElychartsZingChartRGraphDojo ChartingBluffcanvasXpressccchartJITJSXGraphSmoothie ChartsYUI ChartsamchartsEmprise JavaScript ChartsFusionChartsJavaScript Diagram BuilderjGraphSencha Touch ChartsStyle ChartAwesomeChartJS等,都各有千秋,如果你对这些库感兴趣的话,可以访问相应的链接或者阅读原文

  这个列表对于想要利用JavaScript技术创建图表展现数据的开发者来说,非常具有参考意义,你可以从中选择最适合的库,从而高效、高质量地完成任务。

相关文章
图表
4.5 图表 4.5.1 图表简介 1、图表 图表就是工作表单元格中数据的图形化表示,以直观形象的形式显示数据及数据之间的关系。 图表是基于工作表中的数据建立的,为工作表中的数据建立了图表后,图表和建立图表的数据就建立了一种动态链接关系: 1删除数据清单中的源数据时,图表中相应数据系列会自动删除。 2但删除图表中数据系列时,数据清单中源数据不变 2、图表的分类 按照图表的存放位置分为以下两种类型: 1嵌入式图表 (Alt+F1,默认),它和创建图表的数据源放置在同一张工作表中,打印时同时打印; 2独立图表 (F11),它是一个独立的图表工作表,打印时也将与数据表分开打印。 注意
|
2月前
|
SQL
Grafana如何展示柱状图-将折线图调整为柱状图
Grafana如何展示柱状图-将折线图调整为柱状图
|
3月前
|
数据可视化 JavaScript 算法
Echarts可视化图表的使用
Echarts可视化图表的使用
42 0
|
图形学
图表解析系列之折线图
折线图用于分析事物随时间或有序类别而变化的趋势。如果有多组数据,则用于分析多组数据随时间变化或有序类别的相互作用和影响。折线的方向表示正/负变化。折线的斜率表示变化的程度。
|
数据挖掘
图表解析系列之柱状图
作为人们最常用的图表之一,柱状图也衍生出多种多样的图表形式。例如,将多个并列的类别聚类、形成一组,再在组与组之间进行比较,这种图表叫做“分组柱状图”或“簇状柱形图”。将类别拆分称多个子类别,形成“堆叠柱状图”。再如将柱形图与折线图结合起来,共同绘制在一张图上,俗称“双轴图”,等等。
图表解析系列之饼图
● 想要突出表示某个部分在整体中所占比例; ● 分类数量最好不大于 5 个; ● 各不同分类间的占比差异明显。
图表解析系列之饼图
|
数据可视化 JavaScript 定位技术
可视化图表 Echarts
可视化图表 Echarts
534 0
R常用图表网站
R常用图表网站
68 0
|
数据可视化 BI 定位技术
统计分析图表显示(其他样式) | 学习笔记
快速学习 统计分析图表显示(其他样式)
54 0
|
Web App开发 数据可视化 前端开发
Bokeh 这可视化图表做的,也太好看了吧!
Python交互式可视化库Bokeh在现代web浏览器中支持大型数据集的高性能可视化表示。Bokeh 的目标是使用 D3.js 样式提供优雅,简洁新颖的图形化风格,同时提供大型数据集的高性能交互功能。
Bokeh 这可视化图表做的,也太好看了吧!