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

我已经在我的项目中多次使用chart.js，但我从未使用过d3.js。很多人都说d3.js是用于图表的最佳javascript框架，但没有人能够解释原因，尤其是当我想要与chart.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的一部分——如果您现在希望该点变为绿色，只需将其更改即可。画布是一个静态的绘图，需要重新绘制以进行任何更改-当然，它绘制得如此之快，你通常不会注意到。这是微软发布的。2016年更新

一般的经验法则是：

d3.js

-非常适合交互式可视化

chart.js

-非常适合快速简单

---

正在上升，所以请继续测试，不要忘记为测试做出贡献

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

c3，它基于d3，因此使用SVG

正在使用画布的chart.js

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

我加载了4个图表（直线、条形图、饼图、直线/条形图组合），总共有大约500个数据点

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

在现代安卓和IPhone设备上，C3大约需要1500-1800毫秒。iPhone的性能比Android好100毫秒左右

Chart.js大约需要400-800毫秒。Android的性能比iPhone好300毫秒左右

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

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

希望这能有所帮助 chart.js

它使用html5画布标记，该标记依赖于像素，因此当您调整chart.js生成的图形的大小时，您会失去清晰度

它是声明性的，意味着您只需声明生成图形所需的输入

学习曲线较小

生成的图表类型是预定义的和有限的

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

---

@emrah，该链接可能很旧（大约在IE9时代），但提供的信息仍然非常相关。为了好玩，我正在使用d3.js和相同的数据集开发chart.js基本图表。你可以看看-更新2018 d3也有画布