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

d3.js不是一个"图表"库。 它是一个用于创建和操作SVG/HTML的库。 它提供了帮助您可视化和操作数据的工具。 虽然您可以使用它来创建常规图表(条形图、折线图、饼图等(，但它的功能远不止于此。 当然，随着这种"有能力做这么多"而来的是更陡峭的学习曲线。 有很多传统的图表库建立在d3.js之上 - nvd3.js，dimple.js，dc.js如果你想走这条路的话。

我不熟悉Chart.js但快速浏览一下网站告诉我，它更像是工厂图表库的运行。 它支持 6 种基本图表类型，您永远不会用它做这样的事情。 但是 API 看起来很简单，我相信它很容易使用。

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

由于我正在尝试找到一个快速的图表库来在移动设备上显示图表，因此性能对我来说很重要。它还必须有一个许可证，使其能够用于商业用途。我比较了：

1. c3，它基于 d3，因此使用 SVG
2. 图表.js使用画布

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

我加载了 4 个图表(折线图、条形图、饼图、折线图/条形图组合(，其中包含大约 500 个数据点。

我的时间测量不包括html页面的实际加载。从开始使用图表库代码到渲染结束，我就从那一刻开始测量。所有图表动画均已关闭。

C3在现代Android和iPhone设备上花费了大约1500-1800毫秒。 iPhone的性能比Android好100毫秒左右。

图表.js大约需要400-800毫秒。Android的表现比iPhone好约300毫秒。

毫不奇怪，SVG 速度较慢。根据您的用例，可能太慢了。

在台式计算机上，c3 的渲染约为 150-200 毫秒，图表.js约为 80-100 毫秒。在Android和iPhone模拟器上运行相同的测试具有与桌面相同的结果。因此，移动设备的速度变慢肯定是由于硬件/处理限制。

希望有帮助

2016 年更新

一般的经验法则是：

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

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

其他一些图表库正在崛起，所以请继续测试，不要忘记为开源做出贡献！

图表.js
• 它使用依赖于像素的html5画布标签，因此当您调整图表大小时.js生成的图形会失去清晰度
• 它是声明性的，这意味着您只需声明所需的输入即可生成图形
• 学习曲线较小
• 生成的图表类型是预定义的，并且受到限制

D3.js
• 它使用与分辨率无关的svg，因此当您调整d3生成的图形的大小时，您不会失去清晰度
• 这是势在必行的，意味着你必须编写一些逻辑来生成图表
• 陡峭的学习曲线
• 生成的图表类型不是预定义的，您可以创建所需的任何图表