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


88

我已经在项目中多次使用chart.js,但从未使用过d3.js。许多人说d3.js是用于图表的最佳javascript框架,但是它们都无法解释原因,尤其是当我想与chart.js进行比较时。

我发现了这一点:http : //www.fusioncharts.com/javascript-charting-comparison/ 但这不是我想要的。

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


1
只是为了好玩,我正在使用具有相同数据集的d3.js开发chart.js基本图表。您可以看一下-s.codepen.io/bumbeishvili/debug/RGbvPg
bumbeishvili 2016年

更新2018 d3也有画布
PirateApp

Answers:


215

d3.js不是“图表”库。 它是用于创建和操作SVG / HTML的库。它提供了可帮助您可视化和处理数据的工具。虽然您可以使用它来创建常规图表(条形图,折线图,饼图等),但是它的功能却更多。当然,有了“那么多能力”,学习曲线就会变得陡峭。如果要走这条路线,有很多传统的制图库都建立在d3.js- nvd3.js,之上。dimple.jsdc.js

我不熟悉,Chart.js但是快速浏览该网站可以发现,它更像是轧机图表库的一部分。它支持6种基本的图表类型,你是不是曾经打算做的东西 这样 但是API看起来很简单,而且我敢肯定它易于使用。

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


6
@emrah,该链接可能很旧(大约在IE9时),但是提供的信息仍然非常相关。
2016年

36

由于我试图找到一个快速的图表库以在移动设备上显示图表,因此性能对我很重要。它还必须具有许可证,以使其有可能在商业上使用。我比较了:

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

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

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

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

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

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

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

在台式计算机上,c3中的渲染时间约为150-200ms,charts.js的渲染时间约为80-100ms。在Android和iPhone模拟器上运行相同的测试,其结果与在桌面上相同。因此,移动设备的速度下降肯定是由于硬件/处理限制所致。

希望有帮助



0
    chart.js
  • 它使用html5 canvas标签,该标签依赖于像素,因此,当您调整chart.js生成的图形的大小时,您的清晰度会变得不清晰
  • 它是声明性的,意味着您只需要声明所需的输入即可生成图形
  • 学习曲线少
  • 生成的图表类型是预定义的且受限制的
    d3.js
  • 它使用的是与分辨率无关的svg,因此,当您调整d3生成的图形的大小时,您将不会失去清晰度
  • 这势在必行,这意味着您必须编写一些逻辑来生成图表
  • 陡峭的学习曲线
  • 生成的图表类型不是预定义的,您可以创建所需的任何图表
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.