使用 html 绘制数据图表 [英] Data graphing with html

问题描述

每几秒钟更新一次并且不需要刷新页面的折线图将是目标(它将从服务器上更新的单独文件中获取信息).是否有任何 JavaScript 库(JQuery 除外)可以使这变得容易?谁能在网页上展示一个例子?

A line chart that updates every couple of seconds and doesn't need the page to be refreshed would be the goal (it would get the info from a separate file that updates on a server). Are any JavaScript libs(other than JQuery) that will make this is easy? Could anyone show an example on a webpage?

数据以固定时间间隔更新.如果可能，最好只使用 CSS HTML5 和 javascript.

The data gets updated on a fixed interval. If possible the preference would be to use only CSS 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.这比使用图表库要困难一些，但应该是可行的.(假设难度等级为 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).

当您以固定的时间间隔获取数据时，您可以使用常规的 ajax 库.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

这篇关于使用 html 绘制数据图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！