通过 HTML 用于移动应用程序的高性能 JavaScript 图表 API
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13850343/
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
High performance JavaScript chart API for Mobile applications through HTML
提问by utvecklare
I'm working on a cross-platform mobile application through MoSync. Regarding a JavaScript chart for displaying data come from Bluetooth in the mobile device, I need a JavaScript chart API which has a very high rendering speed and performance. It should be fast enough to draw/redraw/update the chart as the data will be injected to the Webview. AFAIK from testing couple of APIs, data injection reduce the speed in the mobile applications. FFI, following points could be helpful to show how fast the chart should be in order to run smoothly in the application.
我正在通过 MoSync 开发跨平台移动应用程序。关于用于显示移动设备中蓝牙数据的 JavaScript 图表，我需要一个具有非常高的渲染速度和性能的 JavaScript 图表 API。绘制/重绘/更新图表应该足够快，因为数据将被注入到 Web 视图中。AFAIK 通过测试几个 API，数据注入降低了移动应用程序的速度。FFI，以下几点可能有助于显示图表应该多快才能在应用程序中顺利运行。
- Update:every 500ms or possibly 250ms
- New data per update:three arrays with size 50 for three series
- Data traverse(from Bluetooth to chart API): c++ >> UI (HTML) >> WebView >> chart API
- 更新：每 500 毫秒或可能 250 毫秒
- 每次更新的新数据：三个系列的三个大小为 50 的数组
- 数据遍历（从蓝牙到图表API）：c++ >> UI (HTML) >> WebView >> chart API
Note that I am aware of tons of available JavaScript chart APIs, however I need a piece of advice which has considered the explained situation.
请注意，我知道有大量可用的 JavaScript 图表 API，但是我需要一条考虑了所解释情况的建议。
回答by JSuar
Below you'll find my research. Hopefully, this helps you find a solution.
下面你会发现我的研究。希望这可以帮助您找到解决方案。
Comparison of JavaScript Data Visualization Librariesspecifically says that flotr2is built for performance. It was posted on June, 2012.
Mobile friendly:Yes, built for performance and includes touch events / multi touch
Interesting features:extensible plugin framework, tuned for performance. JSON api, programmable for interactivity
RGraph: Notable solution that specifically addresses performance and mobile issues. They have a whole page breaking down how they achieve superior performance.
JSXGraph: The comparison article 13 Chart and Graph plotting javascript pluginsstates that "special care has been taken to optimize the performance." However, I didn't see anything on the site about mobile support.
You might want to have a look at these:
http://jsperf.com/search?q=chart
The only one I can see there that would be any use for you is flot vs. raphael, though. Of course you can always try to build on top of that and write your own tests for other libs you're interested in.
Unfortunately, Javascript Graphs and Charts librariescomparison does not have a performance criteria but I thought might still be helpful.
Another via r/programming: https://canvasjs.com
JavaScript 数据可视化库的比较特别指出flotr2是为性能而构建的。它于 2012 年 6 月发布。
移动友好：是的，专为性能而设计，包括触摸事件/多点触摸
有趣的功能：可扩展的插件框架，针对性能进行了调整。JSON api，可编程交互
RGraph：值得注意的解决方案，专门解决性能和移动问题。他们有一整页来分解他们如何实现卓越的性能。
JSXGraph：比较文章13 Chart and Graph plotting javascript plugins指出“已特别注意优化性能。” 但是，我在网站上没有看到任何有关移动支持的信息。
你可能想看看这些：
http://jsperf.com/search?q=chart
不过，我能看到的唯一一个对你有用的是 flot vs. raphael。当然，您始终可以尝试在此基础上进行构建，并为您感兴趣的其他库编写自己的测试。
不幸的是，Javascript Graphs 和 Charts 库比较没有性能标准，但我认为可能仍然有帮助。
另一个通过 r/programming：https: //canvasjs.com
回答by Adarsh Urs
Here is another High Performance Charting Library called CanvasJS
这是另一个名为CanvasJS 的高性能图表库
It renders over 100,000 datapoints in 100-200ms. Because it is based on Canvas, it works on most modern devices.
它在100-200ms 内呈现超过 100,000 个数据点。因为它基于 Canvas，所以它适用于大多数现代设备。
回答by Ryan Lynch
I've had excellent experiences with the Highchartscharting library with large datasets (up to 10000 points). It uses SVG and VML for rendering, which is much faster than canvas based solutions. Plus, because it doesn't use flash, it will work on most mobile devices.
我在拥有大型数据集（最多 10000 点）的Highcharts图表库方面拥有出色的经验。它使用 SVG 和 VML 进行渲染，这比基于画布的解决方案快得多。另外，因为它不使用闪存，所以它可以在大多数移动设备上运行。
回答by sigs
Check out dygraphs, it has an impressive demo. Tested it on briefly on phones, feels good man.
查看dygraphs，它有一个令人印象深刻的演示。在手机上简单测试了一下，感觉不错。
See also comparison of relevant projects.
另见相关项目比较。
回答by Pasi Tuomainen
LightningChart JShas WebGL rendering, and optimized for real-time streaming data. For web, it offers excellent performance, and millions of data points / sec can be added in to chart while keeping high FPS rate.
LightningChart JS具有 WebGL 渲染，并针对实时流数据进行了优化。对于网络，它提供了出色的性能，并且可以在保持高 FPS 率的同时将数百万个数据点/秒添加到图表中。
[I'm the tech lead of LightningChart components]
【我是LightningChart组件技术负责人】
