28

我正在通过 MoSync 开发跨平台移动应用程序。关于显示数据的 JavaScript 图表来自移动设备中的蓝牙，我需要一个具有非常高的渲染速度和性能的 JavaScript 图表 API。它应该足够快来绘制/重绘/更新图表，因为数据将被注入 Webview。AFAIK 测试了几个 API，数据注入降低了移动应用程序的速度。FFI，以下几点可能有助于显示图表应该多快才能在应用程序中顺利运行。

  1. 更新：每 500 毫秒或可能 250 毫秒
  2. 每次更新的新数据：三个系列的大小为 50 的三个数组
  3. 数据遍历（从蓝牙到图表API）：c++ >> UI (HTML) >> WebView >> chart API

请注意，我知道大量可用的 JavaScript 图表 API，但是我需要一条考虑到解释情况的建议。

4

6 回答 6

41

下面你会发现我的研究。希望这可以帮助您找到解决方案。

  1. JavaScript 数据可视化库的比较特别指出，flotr2是为性能而构建的。它于 2012 年 6 月发布。

    移动友好：是的，专为性能而设计，包括触控事件/多点触控

    有趣的功能：可扩展的插件框架，针对性能进行了调整。JSON api，可编程的交互性

  2. RGraph：专门解决性能和移动问题的显着解决方案。他们有一整页分解了他们如何实现卓越的性能。

  3. JSXGraph：比较文章13 Chart and Graph plotting javascript plugins指出“已特别注意优化性能”。但是，我在网站上没有看到任何有关移动支持的信息。

  4. 你可能想看看这些：

    http://jsperf.com/search?q=chart

    不过，我在那里看到的唯一对你有用的是弗洛特与拉斐尔。当然，您总是可以尝试在此基础上构建并为您感兴趣的其他库编写自己的测试。

    通过https://stackoverflow.com/a/9900526/1085891

  5. 不幸的是，Javascript 图形和图表库比较没有性能标准，但我认为可能仍然有帮助。

  6. 另一个通过 r/programming：https ://canvasjs.com

额外： 移动设备上的 JavaScript 性能

于 2012-12-19T01:25:29.280 回答
4

这是另一个名为CanvasJS的高性能图表库

它在100-200 毫秒内呈现超过 100,000 个数据点。因为它基于 Canvas，所以它适用于大多数现代设备。

于 2013-03-31T06:58:05.853 回答
3

我在具有大型数据集（最多 10000 个点）的Highcharts图表库方面拥有出色的经验。它使用 SVG 和 VML 进行渲染，这比基于画布的解决方案要快得多。另外，因为它不使用闪存，所以它可以在大多数移动设备上运行。

于 2012-12-17T15:44:26.507 回答
0

查看dygraphs，它有一个令人印象深刻的演示。在手机上简单测试了一下，感觉不错。

另见相关项目的比较。

于 2014-08-19T13:33:20.043 回答
0

LightningChart JS具有 WebGL 渲染，并针对实时流数据进行了优化。对于 web，它提供了出色的性能，可以在保持高 FPS 速率的同时将数百万个数据点/秒添加到图表中。

[我是 LightningChart 组件的技术负责人]

于 2020-01-23T08:13:51.927 回答
0

到目前为止，我已经找到了两个图表库，它们能够顺利处理 100k 点的数据集。（即使平移和缩放）

PlotlyJS

我惊讶地发现Plotly.js在 SVG 模式下能够轻松处理 100k 点，实时平移和缩放：https ://codepen.io/Venryx/pen/eYzpEzN

Demo的核心代码如下：

const line = {
    x: [],
    y: [],

    // uncomment this line to disable the data simplify/decimate optimization
    //line: {simplify: false},

    // use 'scattergl' for WebGL renderer; though this seems to break updates to data
    type: 'scatter',
};

updateData(1000);
function updateData(yRange) {
    line.x = [];
    line.y = [];
    for (var i = 0; i < 100000; i++) {
      line.x.push(i);
      line.y.push(Math.sin(i / 500) * yRange);
    }

    // if calling a second time, add code here to update the chart (see demo)
}

Plotly.newPlot('graph', [line]);

有一些基于 WebGL 的图表库具有更好的原始性能（即预数据抽取），例如webgl-plot和TimeChart；然而，因为 Plotly.js 带有一个花哨的数据抽取/简化选项，它最终提供了相当的性能。（并且比那些 WebGL 库的限制更少——例如，svg-mode Plotly 允许您在初始渲染后添加和编辑数据条目）

uPlot

uPlot是我发现的第二个图表库，可以轻松绘制 100k+ 数据集。

随着点数超过 100 万大关，它实际上甚至开始超过 Plotly 的响应能力。（尤其适用于使用“扩展数据”按钮进行缩放和添加/修改数据）

演示（旨在与上面的 Plotly 相匹配）：https ://codepen.io/Venryx/pen/qBNOoYO

（uPlot 现在是我为具有超大数据集（即 100 万+）的图表选择的库。）

于 2020-10-13T14:41:07.720 回答