寻找一个可以在散点图上绘制约 200,000 个点的 javascript 图表库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7496508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Looking for a javascript chart library that can draw ~200,000 points on a scatter plot
提问by mojones
I am building a web application who's interface includes a large scatter plot to give the user an overview of his data. The scatter plot has about 200,000 points. Currently I am using the JFreeChart Java library server side which does a great job of drawing the plot - it only takes around a second to render it.
我正在构建一个 Web 应用程序，该应用程序的界面包含一个大型散点图，以便为用户提供其数据的概览。散点图大约有 200,000 个点。目前我正在使用 JFreeChart Java 库服务器端，它在绘制绘图方面做得很好 - 渲染它只需要大约一秒钟。
To make my app more interactive, I'd like to switch to using Javascript to draw the chart client-side. This would let me include interactive filtering of points, tooltips, clickable points, etc. I've experimented with Google Charts, but this takes an age to render and brings the browser to a standstill.
为了使我的应用更具交互性，我想切换到使用 Javascript 来绘制图表客户端。这将让我包括点、工具提示、可点击点等的交互式过滤。我已经尝试过谷歌图表，但这需要很长时间来呈现并使浏览器陷入停顿。
Does anybody know of a Javascript charting library that can cope with such a large dataset? Or should I abandon the idea and stick with JFreeChart? I don't mind if the page itself will take a while to load (this is inevitable given the large amount of data to be transferred) but I need the chart to update in reasonable time in response to user input.
有人知道可以处理如此大数据集的 Javascript 图表库吗？或者我应该放弃这个想法并坚持使用 JFreeChart？我不介意页面本身是否需要一段时间才能加载（鉴于要传输的大量数据，这是不可避免的），但我需要图表在合理的时间内更新以响应用户输入。
采纳答案by solendil
My suggestion would go to Highcharts and Highcharts Stocks (http://www.highcharts.com).
我的建议是去 Highcharts 和 Highcharts Stocks ( http://www.highcharts.com)。
You can find a demo there with 52k datapoints, with zoom, tooltips and interaction : http://www.highcharts.com/stock/demo/data-grouping, and the chart takes about 90ms to build on my (quite fast) machine.
你可以在那里找到一个带有 52k 数据点、缩放、工具提示和交互的演示：http: //www.highcharts.com/stock/demo/data-grouping，在我的（相当快的）机器上构建图表大约需要 90 毫秒.
However, very large datasets are most likely to pose big performance issues, whether it is on network transfer, memory consumption, display time, etc... Moreover, 200k data points amount to about 1 data point/pixel on a 600*400 graphic, or 400 data points per column, it just makes no sense. Maybe some grouping and/or filtering would be useful.
然而，非常大的数据集最有可能带来很大的性能问题，无论是在网络传输、内存消耗、显示时间等方面……而且，200k 数据点在 600*400 图形上相当于大约 1 个数据点/像素或每列 400 个数据点，这毫无意义。也许一些分组和/或过滤会很有用。
回答by Richard H Fung
For those of you who are looking at this question today, DC.jsis a powerful library for charting large datasets, which is built on D3.js. It has several chart types including scatterplot, bar, and line graphs. They run though Square's crossfilterlibrary to map-reduce data before plotting.
对于今天正在研究这个问题的人来说， DC.js是一个强大的用于绘制大型数据集图表的库，它建立在D3.js之上。它有多种图表类型，包括散点图、条形图和折线图。他们运行 Square 的crossfilter库，在绘图之前对数据进行 map-reduce。
回答by nicholaswmin
As others have pointed out -
正如其他人指出的那样——
Creating such a high-node interactive plot in a limited space is virtually useless - the points would be unclickable and the plot would be overpopulated, to say the least.
在有限的空间中创建这样一个高节点的交互图实际上是无用的——至少可以说，这些点将无法点击，并且该图会人满为患。
You can use the current viewport and the current zoom level to limit what you need to show
您可以使用当前视口和当前缩放级别来限制您需要显示的内容
Zoom level grouping and breaking down
缩放级别分组和分解
You can use the current zoom level to draw your charts accordingly, such that a zoomed-out view presents grouped together info and as you zoom-in to a particular region you break down the data into more plots.
您可以使用当前的缩放级别相应地绘制图表，以便缩小的视图显示组合在一起的信息，并且当您放大到特定区域时，您可以将数据分解为更多图。
I would suggest that you group together small variationsof your data and as your user zooms in, you can break down the currently-viewable data into smaller chunks.
我建议您将数据的小变化组合在一起，当您的用户放大时，您可以将当前可查看的数据分解为更小的块。
Current viewport/draw only data that is in the viewport
当前视口/仅绘制视口中的数据
Draw points onlywhen they are only in the viewport - avoid drawing all of the points of you scatter plot on each zoom level. Your user most likely wants to concetrate on a point - that would be the reason he zoomed in to that point - therefore avoid drawing all of broken-down points of that particular zoom level.
仅当点仅在视口中时才绘制点- 避免在每个缩放级别绘制散点图的所有点。您的用户很可能希望专注于一个点 - 这就是他放大到该点的原因 - 因此避免绘制该特定缩放级别的所有分解点。
Don't limit yourself to plotting libraries
不要局限于绘制库
A scatter plot is fairly simple to implement in any Canvas/SVG library that allows the basic operations of drawing shapes/points - Since this is a fairly advanced use-case, I would ditch the idea of limiting myself to libraries that allow plotting and look around for general libraries that allow SVG/Canvas drawings.
在任何允许绘制形状/点的基本操作的 Canvas/SVG 库中实现散点图都相当简单 - 由于这是一个相当高级的用例，我将放弃将自己限制在允许绘图和查看的库的想法用于允许 SVG/Canvas 绘图的通用库。
A crazy idea but I would try it:
一个疯狂的想法，但我会尝试：
There is a library that uses WebGLfor 2D drawings on HTML5 canvas(it uses the graphics card as well as the CPU to draw graphics), called Pixi.js.
有一个使用WebGL在 HTML5 画布上进行 2D 绘图的库（它使用显卡和 CPU 来绘制图形），称为Pixi.js。
It's targeted to game development mostly but it would be a slam-dunk to draw a scatter plot with it, zoom around and allow for click events on your points.
它主要针对游戏开发，但是用它绘制散点图，放大并允许在您的点上进行点击事件将是一个灌篮。
回答by trashgod
As an interim or alternate solution, consider deploying your JFreeChartvia Java-Web-Start. This examplesuggests ways in which to update a chart's appearance interactively.
作为临时或替代解决方案，请考虑JFreeChart通过Java-Web-Start部署您的解决方案。此示例建议了以交互方式更新图表外观的方法。
回答by David Beckwith
If you have the luxury of not developing for IE7 or IE8, then for large numbers of data points, you might want to try to leverage your graphics card via webgl. I haven't tried it yet but three.jslooks interesting.
如果您有幸不为 IE7 或 IE8 开发，那么对于大量数据点，您可能想尝试通过 webgl 来利用您的显卡。我还没有尝试过，但three.js看起来很有趣。
回答by DhruvPathak
You might want to experiment with charting libraries that are built upon raphael.js.
Not sure about their rendering performance, but they are excellent html5 libraries.
Worth a try.
您可能想尝试使用基于raphael.js. 不确定它们的渲染性能，但它们是出色的 html5 库。值得一试。
回答by Gregory Nozik
I suggest to use graph ExtJs 4 library
我建议使用图形 ExtJs 4 库
http://dev.sencha.com/deploy/ext-4.0.2a/examples/charts/Line.html
http://dev.sencha.com/deploy/ext-4.0.2a/examples/charts/Line.html
You need to transfer data as json if it's large data.
如果是大数据，则需要将数据传输为json。
