在带有html5的折线图上的实时数据图形 [英] Real time data graphing on a line chart with html5

问题描述

我想制作一个线形图，每几秒钟更新一次，不需要刷新页面（它将从一个单独的文件中获取更新在服务器上的信息），是他们的任何JavaScript库（其他比JQuery），这将使这很容易？任何人都可以在网页上显示平均值的例子？从1到10，这是多么艰难（10是硬）

I want to make a line chart that updates every couple of seconds and doesn't need the page to be refreshed(it would get the info from a separate file that updates on a server), is their any JavaScript libs(other than JQuery) that will make this is easy? could anyone show mean example on a webpage? On a scale from 1 to 10 how hard would this be?(10 being hard)

此外，如果重要的是，数据以10秒的固定间隔更新。如果可能，我只想坚持CSS3 HTML5和javascript。

Also the data gets updated on a fixed interval of 10s if that matters. And if possible I would like to stick to just CSS3 HTML5 and javascript.

推荐答案

有几个图表库可以使用： gRaphael ， Highcharts 和其他人提到的。这些库是相当容易使用和有良好的文档（让我们说难度标度上的1）。

There are several charting libraries that can be used : gRaphael, Highcharts and the one mentioned by others. These libraries are quite easy to use and well-documented (lets say 1 on the difficulty scale).

AFAIK，这些库不是实时，因为他们不可能在飞行中添加新的点。要添加新点，您需要重绘整个图表。但我认为这不是一个问题，因为重绘图表是快。我已经做了一些尝试与gRaphael和我没有注意到这种方法的任何问题。如果你更新率是10秒，应该工作确定（但它可能取决于你的图表的复杂性）。

AFAIK, these libs are not "real-time" because they don't give the possibility to add new points on the fly. To add new point, you need to redraw the full chart. But I think this is not a problem because redrawing the chart is fast. I've made some tries with gRaphael and I didn't notice any problem with this approach. If you update rate is 10s that should work ok (but it may depends on the complexity of your charts).

如果重新绘制完整图表是一个问题，您可能需要自己开发一个图表，使用向量图形库，例如 Raphael 或 paper.js 。这将是一个比使用图表lib更难一点，但应该是可行的。 （让我们说难度标度上的5）。

If redrawing the full chart is a problem, you may have to develop a chart by yourself with a vector graphics lib like Raphael or paper.js. That will be a bit harder than using a charting lib but should be feasible. (Let say 5 on the difficulty scale).

当你在一个固定的intervall获取数据，你可以使用一个常规的ajax lib。 jQuery对我确定，但有一些其他的选择。这可能不是非固定间隔的最佳选择，在这种情况下，您可能需要查看类似 socket.io

As you are getting the data on a fixed intervall, you can use a regular ajax lib. jQuery is ok for me but there are some other choices. That may not be the best choice for a non-fixed interval and in this case you may have to look at something like socket.io but it would have consequences on the server side too.

注意1：Raphael，gRaphael和Highcharts不是纯粹的HTML5，而是SVG / VML，但我想这是可以接受的选择。

Note1: Raphael, gRaphael and Highcharts are not purely HTML5 but SVG/VML but I guess this is an acceptable choice too.

注2：看来，当插入新点时，Highchart不需要重绘图表。请参见 http://www.highcharts.com/documentation/how-to-使用＃live-charts

Note2: it seems that Highchart doesn't require to redraw the chart when inserting new points. See http://www.highcharts.com/documentation/how-to-use#live-charts

这篇关于在带有html5的折线图上的实时数据图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！