d3.js和chart.js（仅限图表）的比较

Question

我在我的项目中多次使用了chart.js，但我从未使用过d3.js。很多人说d3.js是最好的JavaScript图表框架，但他们却无法解释为什么，特别是当我需要与chart.js进行比较时。

我找到了这个网站：http://www.fusioncharts.com/javascript-charting-comparison/ 但这不是我想要的。

有人知道这些框架在可用性和性能方面（仅限于图表）的比较吗？

- mendrugory

---

只是为了好玩，我正在使用相同的数据集使用d3.js开发chart.js基本图表。你可以看一下 - https://s.codepen.io/bumbeishvili/debug/RGbvPg - bumbeishvili

更新：2018年d3也有画布。 - PirateApp

Answer 1

d3.js不是一个"图表"库。它是一个用于创建和操作SVG/HTML的库。它提供了工具来帮助您可视化和操作数据。虽然您可以使用它来创建传统的图表（柱状图、折线图、饼图等），但它还能做更多的事情。当然，这种"能做更多"也意味着学习曲线更陡峭。如果您想选择这条路线，还有很多基于d3.js的传统图表库，如nvd3.js、dimple.js、dc.js。

我对Chart.js不太熟悉，但是快速浏览了一下官网，发现它更像是一个普通的图表库。它支持6种基本的图表类型，但你不太可能用它来做像这样的 东西 之类的 事情 。 不过，它的API看起来很简单，我相信使用起来应该很容易。

两者之间最明显的区别是，Chart.js基于canvas，而d3.js主要是关于SVG。（现在我说“主要”是因为d3.js可以操作所有类型的HTML元素，所以你甚至可以用它来帮助你在canvas上绘图。）总的来说，对于许多元素，canvas的性能要优于SVG（我指的是大规模的-成千上万个点、线等等...）。

另一方面，SVG更容易操作和交互。使用SVG，每个点、线等都成为DOM的一部分-你现在想让那个点变成绿色，只需改变它。而使用canvas，它是一个静态的绘图，必须重新绘制才能进行任何更改-当然，它绘制得非常快，你通常不会注意到。这里有一些来自微软的好文章可以阅读。

- Mark

---

@emrah，链接可能有些陈旧（大约是IE9时期），但提供的信息仍然非常相关。 - Mark

Answer 2

由于我正在寻找一款快速的图表库来在移动设备上显示图表，因此性能对我来说非常重要。它还必须具有商业使用许可证。我进行了比较：

1. c3，基于d3，因此使用SVG
2. chart.js，使用canvas

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

我加载了4个图表（线性、条形、饼状、线性/条形组合），共计约500个数据点。

我的时间测量排除了实际加载HTML页面的时间。我从开始使用图表库代码到渲染结束的时间进行测量。所有图表动画都已关闭。

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

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

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

在台式电脑上，C3的渲染时间约为150-200毫秒，而Chart.js约为80-100毫秒。在Android和iPhone模拟器中运行相同的测试与桌面上的结果相同。因此，在移动设备上的减速明显是由于硬件/处理限制引起的。

希望这有所帮助

- haferblues

Answer 3

2016年更新

一般的经验法则是:

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

chart.js - 非常适合快速简单的可视化

还有其他一些图表库正在兴起，因此保持测试并不要忘记为开源项目做出贡献!

- the_red_baron

Answer 4

chart.js
• 它使用 html5 canvas 标签，该标签是像素依赖的，因此当您调整大小 chart.js 生成的图表时，您会失去清晰度
• 它是声明性的，意味着您只需声明所需的输入即可生成图表
• 学习曲线较为平缓
• 生成的图表类型是预定义的和有限的

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

- krishna