如何绘制能够应对极高数据量的JavaScript图表?

时间:2015-09-15 08:25:50

标签: javascript ajax asp.net-mvc-4 charts

我试过但是找不到类似的文章,如果我错过任何一篇,那么道歉。

我正在开发一个基于ASP.Net MVC4的项目。

我们需要为 非常大量的数据 绘制图表(使用AJAX,JavaScript)。

E.g。我们需要绘制具有75,000多个数据点的波形图。

到目前为止,我们已经使用JQWidgets实现了解决方案。这通常适用于我们的初始测试,但是当图表显示大量数据时,图表会花费很长时间来加载。

我们也尝试过HighCharts,但它也开始因大量数据而减速(此时无法过滤或汇总数据)。

请理解我们需要显示大量数据,因为我们需要可视化传感器生成的波形。

我确定我不是唯一一个遇到过这个问题的人,所以我想知道你们中是否有人能够解决这个问题。

3 个答案:

答案 0 :(得分:9)

ZingChart library可能会让您感兴趣。 ZingChart专为大数据而构建,并提供一些强大的功能,以确保快速,稳定的渲染。

This demo在一秒钟内轻松呈现100k积分,如果您对比较感兴趣,还可以ZingChart Vs. demo(请注意右上角的警告)。

我是ZingChart团队的成员,我们在这里回答您对图书馆的任何疑问!

答案 1 :(得分:1)

我建议你尝试高级图表。

获取所需数据并将其转换为JSON并使用Dotnet.Highchart

加载

请找到参考:https://dotnethighcharts.codeplex.com/

EX:

public ActionResult Index()
{
    DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
        .SetXAxis(new XAxis
                    {
                        Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
                    })
        .SetSeries(new Series
                    {
                        Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
                    });

    return View(chart);
}

答案 2 :(得分:1)

有了这么多的数据,您应该考虑按需加载数据。我认为任何图表库都不能很好地处理75000个数据点。我认为更好的方法是按需加载数据。