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

我已经在我的项目中使用 chart.js 好几次了，但是我从来没有使用过 d3.js。很多人说 d3.js 是最好的用于图表的 javascript 框架，但是没有人能够解释为什么，特别是当我想要与 chart.js 进行比较的时候。

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

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

66912 次浏览
小开
最佳答案

d3.js is not a "charting" library. It is a library for creating and manipulating SVG/HTML. It provides tools to help you visualize and manipulate your data. While you can use it to create conventional charts (bar, line, pie, etc...) it's capable of so much more. Of course with this "capable of so much" comes a steeper learning curve. There are a lot of conventional charting libraries built on top of d3.js - nvd3.js, dimple.js, dc.js if you want to go that route.

I'm not familiar with Chart.js but a quick look at the website tells me it's more of a run of the mill charting library. It supports 6 basic chart types and you aren't ever going to do stuff like this with it. But the API looks straightforward and I'm sure it's easy to use.

Other than that the most obvious distinction between the two is that Chart.js is canvas based, while d3.js is mainly about SVG. (Now I say mainly because d3.js can manipulate all types of HTML elements so you could even use it to help you draw on a canvas.) In general canvas will out perform SVG for a large number of elements (I'm talking very large - thousands of points, lines, etc...). SVG, on the other hand, is easier to manipulate and interact with. With SVG each point, line, etc becomes part of the DOM - you want that point green now, just change it. With canvas its a static drawing that was to be redrawn to make any change - of course it draws so fast you'll usually never notice. Here's some good reading from Microsoft.

小开

UPDATED 2016

The general rule of thumb is:

d3.js - great for interactive visualizations

chart.js - great for quick and simple

A few other charting libraries are on the rise, so keep testing and don't forget to contribute to the open source!

小开

Since I am trying to find a fast charting library to show charts on mobile devices, performance was important for me. It also had to have a licence that makes it possible to use commercially. I compared:

  1. c3, which is based on d3 and therefore uses SVG
  2. chart.js which is using canvas

The charts are loaded inside a WebView component inside a native app and all data (including the JS library) is local, so no slow down due to http requests. To maximize performance even more, I additionally put everything inside one single file.

I loaded 4 charts (line, bar, pie, line/bar combo) with together around 500 datapoints.

My time measuring exluded the actual loading of the html page. I measured form the moment I started using the charting library code until the end of rendering. All chart animation was turned off.

C3 took around 1500-1800 ms on modern Android and IPhone devices. iPhone performed around 100ms better than Android.

Chart.js took around 400-800ms. Android performed around 300ms better than iPhone.

No surprise, the SVG is slower. Depending on your use case, maybe too slow.

On a desktop computer rendering in c3 was around 150-200ms and charts.js around 80-100ms. Running the same test in Android and iPhone emulator had the same result as on desktop. So the slow down on mobile devices is definitely due to hardware/processing limits.

Hope that helps

小开
    chart.js
  • It uses html5 canvas tag which is pixel dependent ,so when you resize the chart.js generated graph you loose clarity
  • It is declarative, means you have to just declare required inputs to generate graph
  • Learning curve is less
  • Types of charts generated are predefined and limited
    d3.js
  • It uses svg which is resolution independent,so when you resize the d3 generated graph you will not loose clarity
  • It is imperative, means you have to write some logic to generate charts
  • Steep learning curve
  • Types of charts generated are not predefined and you can create any chart you want

提交答案