我已经在项目中多次使用chart.js,但从未使用过d3.js。许多人说d3.js是用于图表的最佳javascript框架,但是它们都无法解释原因,尤其是当我想与chart.js进行比较时。
我发现了这一点:http : //www.fusioncharts.com/javascript-charting-comparison/ 但这不是我想要的。
有谁知道这些框架在可用性和性能方面的比较(仅适用于图表)?
我已经在项目中多次使用chart.js,但从未使用过d3.js。许多人说d3.js是用于图表的最佳javascript框架,但是它们都无法解释原因,尤其是当我想与chart.js进行比较时。
我发现了这一点:http : //www.fusioncharts.com/javascript-charting-comparison/ 但这不是我想要的。
有谁知道这些框架在可用性和性能方面的比较(仅适用于图表)?
Answers:
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的一部分-您现在要将该点变为绿色,只需对其进行更改即可。使用canvas时,它是一个静态图形,需要重新绘制以进行任何更改-当然,它绘制得如此之快,您通常不会注意到。这是Microsoft的一些好读物。
由于我试图找到一个快速的图表库以在移动设备上显示图表,因此性能对我很重要。它还必须具有许可证,以使其有可能在商业上使用。我比较了:
图表加载在本机应用程序的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模拟器上运行相同的测试,其结果与在桌面上相同。因此,移动设备的速度下降肯定是由于硬件/处理限制所致。
希望有帮助