草庐IT

javascript - 提高 Highcharts 折线图的性能

coder 2024-07-18 原文

我正在使用 Highcharts 创建一个具有 1440 个数据点的可缩放折线图，这里是 JSFiddle demo其中。

在 Firefox 中，图表的性能非常缓慢，渲染需要几秒钟，并且在将鼠标悬停在数据点上和工具提示出现之间有很长的延迟。在我的页面上有几个这样的图表，它们的综合影响使页面几乎无法使用。

是否有任何技巧/技巧可以提高具有相对较大数据集的图表的性能？我已将图表的 JSON 附加到这篇文章的末尾(数据本身被 chop 了)。

顺便说一句，在我添加 turboThreshold: 0 属性之前，图表根本没有呈现，因为该系列有超过 1000 个数据点。根据the docs :

When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable. Defaults to 1000.

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'line',
            marginRight: 10,
            zoomType: 'x'
        },

        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            labels: {
                formatter: function () {
                    return currencySymbol + this.axis.defaultLabelFormatter.call(this);
                }
            },

            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + currencySymbol + Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            series: {
                states: {
                    hover: {
                        lineWidthPlus: 0
                    }
                },
                lineWidth: 1,
                marker: {
                    enabled: false,
                    radius: 3
                }
            }
        },
        series: [{
            data: [{"y":93,"x":1412722800000},{"y":54,"x":1412722860000}],
            turboThreshold: 0
        }]
    });
});

更新

我已经 updated the demo包括我到目前为止收到的所有建议。禁用动画有点帮助，但该页面在 Firefox(这是我的主要目标浏览器)中仍然非常缓慢。我已经开始悬赏，希望能吸引更多的建议。

最佳答案

在这里你可以找到FAQ回答你的问题。

附加说明:禁用工具提示时，您将获得巨大的性能提升。

或者只使用 Highstock，它实现了 dataGrouping，例如 chart with 52k of points .

关于javascript - 提高 Highcharts 折线图的性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26266578/

javascriptHighchartssectionnoreferrernoopenerperformance

有关javascript - 提高 Highcharts 折线图的性能的更多相关文章

  1. 程序员如何提高代码能力？ - 2

    前言作为一名程序员，自己的本质工作就是做程序开发，那么程序开发的时候最直接的体现就是代码，检验一个程序员技术水平的一个核心环节就是开发时候的代码能力。众所周知，程序开发的水平提升是一个循序渐进的过程，每一位程序员都是从“菜鸟”变成“大神”的，所以程序员在程序开发过程中的代码能力也是根据平时开发中的业务实践来积累和提升的。提高代码能力核心要素程序员要想提高自身代码能力，尤其是新晋程序员的代码能力有很大的提升空间的时候，需要针对性的去提高自己的代码能力。提高代码能力其实有几个比较关键的点，只要把握住这些方面，就能很好的、快速的提高自己的一部分代码能力。1、多去阅读开源项目，如有机会可以亲自参与开源

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. Ruby 的数字方法性能 - 2

    我正在使用Ruby解决一些ProjectEuler问题，特别是这里我要讨论的问题25(Fibonacci数列中包含1000位数字的第一项的索引是多少？)。起初，我使用的是Ruby2.2.3，我将问题编码为:number=3a=1b=2whileb.to_s.length但后来我发现2.4.2版本有一个名为digits的方法，这正是我需要的。我转换为代码:whileb.digits.length当我比较这两种方法时，digits慢得多。时间./025/problem025.rb0.13s用户0.02s系统80%cpu0.190总计./025/problem025.rb2.19s用户0.0

  4. ruby - Ruby 性能中的计时器 - 2

    我正在寻找一个用ruby​​演示计时器的在线示例，并发现了下面的代码。它按预期工作，但这个简单的程序使用30Mo内存(如Windows任务管理器中所示)和太多CPU有意义吗？非常感谢deftime_blockstart_time=Time.nowThread.new{yield}Time.now-start_timeenddefrepeat_every(seconds)whiletruedotime_spent=time_block{yield}#Tohandle-vesleepinteravalsleep(seconds-time_spent)iftime_spent

  5. ruby-on-rails - 如果条件与 &&，是否有任何性能提升 - 2

    如果用户是所有者，我有一个条件来检查说删除和文章。delete_articleifuser.owner?另一种方式是user.owner?&&delete_article选择它有什么好处还是它只是一种写作风格 最佳答案 性能不太可能成为该声明的问题。第一个要好得多-它更容易阅读。您future的自己和其他将开始编写代码的人会为此感谢您。 关于ruby-on-rails-如果条件与&&，是否有任何性能提升，我们在StackOverflow上找到一个类似的问题：

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. ruby - 如何找到我的 Ruby 应用程序中的性能瓶颈？ - 2

    我编写了一个Ruby应用程序，它可以解析来自不同格式html、xml和csv文件的源中的大量数据。我如何找出代码的哪些区域花费的时间最长？有没有关于如何提高Ruby应用程序性能的好资源？或者您是否有任何始终遵循的性能编码标准？例如，你总是用加入你的字符串吗？output=String.newoutput或者你会使用output="#{part_one}#{part_two}\n" 最佳答案 好吧，有一些众所周知的做法，例如字符串连接比“#{value}”慢得多，但是为了找出您的脚本在哪里消耗了大部分时间或比所需时间更多，您需要进行分

  8. STM32的HAL和LL库区别和性能对比 - 2

    LL库和HAL库简介LL：Low-Layer，底层库HAL：HardwareAbstractionLayer，硬件抽象层库LL库和hal库对比，很精简，这实际上是一个精简的库。LL库的配置选择如下：在STM32CUBEMX中，点击菜单的“ProjectManager”–>“AdvancedSettings”，在下面的界面中选择“AdvancedSettings”，然后在每个模块后面选择使用的库总结：1、如果使用的MCU是小容量的，那么STM32CubeLL将是最佳选择；2、如果结合可移植性和优化，使用STM32CubeHAL并使用特定的优化实现替换一些调用，可保持最大的可移植性。另外HAL和L

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby - GC.disable 的任何性能缺点？ - 2

    是否存在GC.disable会降低性能的情况？只要我使用的是真正的RAM而不是交换内存，就可以这样做吗？我正在使用MRIRuby2.0，据我所知，它是64位的，并且使用的是64位的Ubuntu:ruby2.0.0p0(2013-02-24revision39474)[x86_64-linux]Linux[redacted]3.2.0-43-generic#68-UbuntuSMPWedMay1503:33:33UTC2013x86_64x86_64x86_64GNU/Linux 最佳答案 GC.disable将禁用垃圾回收。像rub

随机推荐