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

我曾多次在我的项目中使用过chart.js,但从未使用过d3.js。 很多人都说d3.js是图表最好的javascript框架,但是没有一个能够解释为什么,特别是当我想和chart.js比较的时候。

我发现这个: http : //www.fusioncharts.com/javascript-charting-comparison/但它不是我正在寻找。

有没有人知道在可用性和性能方面比较这些框架(仅适用于图表)?

d3.js不是“图表”库。 这是一个用于创build和操作SVG / HTML的库。 它提供的工具可以帮助您可视化和处理您的数据。 虽然你可以使用它来创build传统的图表(酒吧,线,馅饼等),它可以做得更多。 当然,这个“有这么多能力”的学习曲线更陡。 在d3.jsnvd3.jsdimple.jsdc.js之上build立了很多传统的图表库,如果你想要走这条路线的话。

我不熟悉Chart.js但是快速浏览一下网站告诉我这更像是一个图表库的运行。 它支持6种基本的图表types,你永远不会像 这样做这样的东西 。 但是 API看起来很简单,我相信它很容易使用。

除此之外,两者之间最明显的区别是Chart.js是基于canvas的,而d3.js主要是关于SVG的。 (现在我说主要是因为SVG可以处理所有types的HTML元素,所以你甚至可以用它来帮助你在canvas上绘图。)一般情况下,canvas会为大量的元素执行SVG(我说的非常大 -数千个点,线等等)。 另一方面,SVG更容易操作和交互。 使用SVG,每个点,线等都成为DOM的一部分 – 现在你想要这个点,只需要改变它。 用帆布画一个静态的绘画,这个绘画将被重新绘制以进行任何改变 – 当然,绘制得太快,你永远不会注意到。 这里有一些来自微软的好消息 。

2016年更新

一般的经验法则是:

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

chart.js – 伟大的快速和简单

其他一些图表库也在不断增加,所以请继续testing,不要忘记为开源贡献!

由于我试图find一个快速的图表库来显示移动设备上的图表,性能对我来说很重要。 它也必须有一个许可证,使商业使用成为可能。 我比较:

  1. c3,它基于d3,因此使用SVG
  2. 使用canvas的chart.js

图表在本地应用程序内部的WebView组件内部加载,并且所有数据(包括JS库)都是本地的,因此不会因为http请求而减慢速度。 为了最大限度地提高性能,我另外把所有内容放在一个文件中。

我加载了大约500个数据点的4个图表(线条,条形图,饼图,线条组合)。

我的时间测量排除了html页面的实际加载。 从开始使用图表库代码的那一刻起,我就开始测量表单,直到渲染结束。 所有图表animation已closures。

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

Chart.js大概需要400-800ms。 Android比iPhone执行时间大约300ms。

毫不奇怪,SVG比较慢。 根据你的用例,可能太慢了。

在c3上的桌面计算机上,大约在150-200ms之间,而在80-100ms之间的时间则是charts.js。 在Android和iPhone模拟器中运行相同的testing与在桌面上的结果相同。 所以移动设备的速度降低肯定是由于硬件/处理限制。

希望有所帮助