问d3.js与chart.js的比较(仅适用于图表)

EN

d3.js 不是一个“图表”库，它是一个用于创建和操作SVG/HTML的库。它提供了帮助您可视化和操作数据的工具。虽然你可以用它来创建常规图表(条形图、线条图、饼图等)它还能做得更多。当然，有了这样的“能力这么多”，就会出现一个更陡峭的学习曲线。在d3.js之上构建了许多传统的图表库-- nvd3.js、dimple.js、dc.js --如果你想走这条路的话。

我不熟悉Chart.js，但是快速浏览一下这个网站就会发现它更像是一个普通的图表库。它支持6种基本图表类型，您永远不会做材料 喜欢 这 使用 它。，但是这个API看起来很简单，我相信它很容易使用。

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

由于我试图找到一个快速图表库来显示移动设备上的图表，所以性能对我来说是很重要的。该公司还必须拥有许可，以便能够在商业上使用。我比较了：

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

图表是在本地应用程序中的WebView组件中加载的，所有数据(包括JS库)都是本地的，所以不会因为http请求而慢下来。为了更好地提高性能，我还将所有内容放在一个文件中。

我加载了4个图表(行，条形图，饼形图，行/条形组合)和大约500个数据点。

我测量的时间排除了html页面的实际加载。从我开始使用图表库代码到呈现结束的那一刻起，我就进行了测量。所有图表动画都已关闭。

C3在现代安卓和IPhone设备上花费了大约1500-1800毫秒。iPhone的表现比安卓好100毫秒左右。

Chart.js大约花费了400-800毫秒。安卓的性能比iPhone高出大约300毫秒。

不足为奇的是，SVG速度较慢。取决于您的用例，可能太慢了。

在桌面计算机上，c3的渲染大约在150-200毫秒，charts.js在80-100毫秒左右。在Android和iPhone模拟器中运行相同的测试结果与在桌面上运行的结果相同。因此，移动设备的速度放缓肯定是由于硬件/处理的限制。

希望这有帮助

更新2016年

一般的经验法则是：

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

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

其他几个图表库正在上升，所以继续测试，不要忘记为开源贡献力量！