d3.js 和 Chart.js 之间的比较（仅适用于图表）[已关闭]

Question

我在项目中多次使用过chart.js，但从未使用过d3.js。很多人说 d3.js 是最好的图表 javascript 框架，但没有人能够解释为什么，特别是当我想与 Chart.js 进行比较时。

有谁知道这些框架在可用性和性能方面的比较（仅针对图表）？

Answer 1

d3.js

不是一个“图表”库。 它是一个用于创建和操作 SVG/HTML 的库。它提供了帮助您可视化和操作数据的工具。虽然您可以使用它来创建传统图表（条形图、折线图、饼图等），但它的功能远不止这些。当然，这种“能力如此之大”会带来更陡峭的学习曲线。有很多传统的图表库构建在

d3.js

之上 -

nvd3.js

、

dimple.js

、

dc.js

（如果您想走那条路）。

我不熟悉

Chart.js

，但快速浏览一下该网站，我会发现它更像是一个普通的图表库。它支持 6 种基本图表类型，您永远不会做 stuff like this with it。但是 API 看起来很简单，而且我确信它很容易使用。

两者之间最明显的区别是

Chart.js

是基于canvas的，而

d3.js

主要是关于SVG的。（现在我说主要是因为

d3.js

可以操作所有类型的HTML元素，所以你甚至可以使用它来帮助你在画布上绘图。）一般来说，对于许多元素来说，canvas的性能优于SVG（我是说巨大 - 数千个点、线等...）。

另一方面，SVG 更容易操作和交互。使用 SVG，每个点、线等都成为 DOM 的一部分 - 您现在希望该点呈绿色，只需更改它即可。对于画布，它是静态绘图，需要重新绘制以进行任何更改 - 当然，它绘制得如此之快，您通常不会注意到。这是来自 Microsoft 的一些不错的读物。

Answer 2

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

图表加载在本机应用程序内的 WebView 组件内，并且所有数据（包括 JS 库）都是本地的，因此不会因 http 请求而变慢。为了进一步最大化性能，我另外将所有内容都放在一个文件中。

我加载了 4 个图表（折线图、条形图、饼图、折线图/条形图组合）以及大约 500 个数据点。

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

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

Chart.js 花费了大约 400-800 毫秒。 Android 的性能比 iPhone 快约 300 毫秒。

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

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

希望有帮助

Answer 3

2016 年更新

一般经验法则是：

d3.js

- 非常适合交互式可视化

chart.js

- 非常快速简单

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

Answer 4

图表.js

d3.js