d3.js和chart.js之间的比较(仅适用于图表)

Question

我在我的项目中多次使用过chart.js,但我从未使用过d3.js. 很多人说d3.js是图表最好的javascript框架,但没有一个能解释原因,尤其是当我想要与chart.js进行比较时.

我发现了这个:http://www.fusioncharts.com/javascript-charting-comparison/ 但它不是我想要的.

有没有人知道这些框架在可用性和性能方面的比较(仅适用于图表)？

Answer 1

d3.js不是一个"图表"库. 它是一个用于创建和操作SVG/HTML的库.它提供了一些工具来帮助您可视化和操作数据.虽然你可以用它来创建传统的图表(条形图,线条图,饼图等)但它能够做得更多.当然,这种"能力如此之多"的学习曲线更加陡峭.有很多建立在顶部的常规图表库d3.js- ,,nvd3.js 如果你想要去的路线.dimple.jsdc.js

我不熟悉,Chart.js但快速浏览一下网站告诉我,这更像是一个工厂图表库的运行.它支持6种基本的图表类型,你是不是曾经打算做的东西 像 这样 用 它. 但 API看起来很简单,我确信它很容易使用.

除此之外,两者之间最明显的区别Chart.js是基于画布,而d3.js主要是关于SVG.(现在我说主要是因为d3.js可以操作所有类型的HTML元素,所以你甚至可以使用它来帮助你在画布上绘图.)一般来说,canvas会为大量元素执行SVG(我说的非常大 - 数千点,线等...).另一方面,SVG更易于操作和交互.使用SVG,每个点,线等都成为DOM的一部分 - 您现在希望该点变为绿色,只需更改它.对于帆布,它是一个静态的绘图,需要重新绘制以进行任何更改 - 当然它绘制得如此之快,以至于你通常都不会注意到.以下是微软的一些好读物.

Answer 2

由于我试图找到一个快速图表库来显示移动设备上的图表,因此性能对我来说非常重要.它还必须拥有可以商业使用的许可证.我比较了:

1. c3,它基于d3,因此使用SVG
2. 使用画布的chart.js

图表在本机应用程序内的WebView组件内加载,所有数据(包括JS库)都是本地的,因此不会因http请求而减慢速度.为了最大限度地提高性能,我还将所有内容都放在一个文件中.

我加载了4个图表(线条,条形图,饼图,线条/条形图组合),大约有500个数据点.

我的时间测量排除了html页面的实际加载.我在开始使用图表库代码的那一刻开始测量,直到渲染结束.所有图表动画都已关闭.

在现代Android和iPhone设备上,C3大约需要1500-1800毫秒.iPhone的表现比Android好100ms.

Chart.js花了大约400-800ms.Android的表现比iPhone好大约300毫秒.

毫不奇怪,SVG速度较慢.根据您的使用情况,可能太慢.

在台式计算机上,在c3中渲染大约150-200ms,chart.js大约80-100ms.在Android和iPhone模拟器中运行相同的测试与在桌面上运行相同.因此,移动设备的减速肯定是由于硬件/处理限制.

希望有所帮助

Answer 3

2016年更新

一般的经验法则是:

d3.js - 非常适合交互式可视化

chart.js - 非常适合快速和简单

其他一些图表库正在兴起,因此请继续测试,不要忘记为开源做贡献!