d3.js和chart.js之间的比较(仅用于图表)[已关闭]

tkclm6bt  于 12个月前  发布在  Chart.js
关注(0)|答案(4)|浏览(187)

已关闭。此问题需要更多focused。目前不接受回答。
**要改进此问题吗?**更新此问题,使其仅针对editing this post的一个问题。

三年前就关门了。
Improve this question
我在我的项目中使用过几次chart.js,但我从来没有使用过d3.js。很多人说d3.js是最好的图表JavaScript框架,但没有人能够解释为什么,特别是当我想与chart.js进行比较时。
我找到了这个:http://www.fusioncharts.com/javascript-charting-comparison/,但它不是我要找的。
有没有人知道这些框架在可用性和性能方面的比较(仅用于图表)?

aamkag61

aamkag611#

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

我对Chart.js并不熟悉,但快速浏览一下网站,我会发现它更像是一个普通的图表库。它支持6种基本的图表类型,你永远不会去做stufflikethiswithit但是API看起来很简单,我相信它很容易使用。
两者之间最明显的区别是Chart.js是基于canvas的,而d3.js主要是关于SVG的。(现在我说 * 主要 * 是因为d3.js可以操作所有类型的HTML元素,所以you could even use it可以帮助你在canvas上绘制。)一般来说,canvas在许多元素上都优于SVG(我说的是巨大的-成千上万的点,线等)。
SVG,另一方面,更容易操作和交互。使用SVG,每个点,线等都成为DOM的一部分-你现在想要那个点绿色,只需改变它。使用画布,它是一个静态的绘图,可以重新绘制以进行任何更改-当然,它绘制得如此之快,你通常不会注意到。下面是来自Microsoft的some good reading

w8f9ii69

w8f9ii692#

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

  1. c3,基于d3,因此使用SVG
    1.使用canvas的chart.js
    图表加载在原生应用程序中的WebView组件中,所有数据(包括JS库)都是本地的,因此不会因http请求而减慢速度。为了最大限度地提高性能,我还将所有内容放在一个文件中。
    我加载了4个图表(线,酒吧,饼,线/酒吧组合)一起约500个数据点。
    我的时间测量排除了html页面的实际加载。我从开始使用图表库代码的那一刻开始测量,直到渲染结束。所有图表动画都关闭了。
    C3在现代Android和iPhone设备上花费了大约1500-1800 ms。iPhone的表现比Android好大约100 ms。
    Chart.js耗时约400- 800毫秒,Android比iPhone好300毫秒左右。
    毫无疑问,SVG更慢。根据您的用例,可能太慢了。
    在桌面计算机上,c3的渲染时间约为150- 200 ms,charts.js约为80- 100 ms。在Android和iPhone模拟器中运行相同的测试与桌面上的结果相同。因此,移动的设备上的速度减慢肯定是由于硬件/处理限制。
    希望有帮助
1cklez4t

1cklez4t3#

2016年夏季

一般的经验法则是:
d3.js-非常适合交互式可视化
chart.js-非常适合快速和简单
A few other charting libraries正在上升,所以继续测试,不要忘记为open source做出贡献!

fslejnso

fslejnso4#

chart.js

  • 它使用html5 canvas标签,这是像素相关的,所以当你调整chart.js生成的图形时,你会失去清晰度
  • 它是声明性的,意味着你必须声明所需的输入来生成图
  • 学习曲线更小
  • 生成的图表类型是预定义的,并且受到限制
    d3.js
  • 它使用的svg是独立于分辨率的,所以当你调整d3生成的图形的大小时,你不会失去清晰度。
  • 它是命令式的,意味着你必须写一些逻辑来生成图表
  • 陡峭的学习曲线
  • 生成的图表类型不是预定义的,您可以创建任何您想要的图表

相关问题