html5 绘图在线,在线图上用html5实时数据绘图[已关闭](Real time data graphing on a line chart with html5 [closed])...

Bertha 。 2022-10-06 00:36 7阅读 0赞

在线图上用html5实时数据绘图\[已关闭\](Real time data graphing on a line chart with html5 \[closed\])

我想制作一个线图，每两秒钟更新一次，不需要刷新页面(它将从服务器上更新的单独文件中获取信息)，是他们的任何JavaScript库(JQuery除外)这会使这很容易吗？ 有人可以在网页上显示平均的例子吗？ 从1到10的规模，这将是多难？(10很难)

如果重要的话，数据也会在10秒的固定时间内更新。 如果可能，我想坚持使用CSS3 HTML5和javascript。

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)

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.

原文：https://stackoverflow.com/questions/6502827

更新时间：2019-11-20 05:09

最满意答案

有几个图表库可以使用： gRaphael ， Highcharts和其他提到的图表。 这些图书馆非常易于使用和记录良好(让我们说难点比例为1)。

AFAIK，这些库并不是“实时的”，因为它们不能在飞行中添加新的点。 要添加新的点，您需要重新绘制完整的图表。 但是我认为这不是一个问题，因为重绘图表很快。 我已经用gRaphael做了一些尝试，我没有注意到这种方法有任何问题。 如果你的更新速率是10s应该可以正常工作(但它可能取决于你的图表的复杂性)。

如果重绘全图是一个问题，您可能需要使用像Raphael或paper.js的矢量图形库自己开发一个图表。 这比使用图表lib有点困难，但应该是可行的。 (让我们说5的难度比例)。

当您获取一个固定的intervall的数据时，您可以使用常规的ajax lib。 jQuery对我来说很好，但还有其他一些选择。 这可能不是非固定间隔的最佳选择，在这种情况下，您可能需要查看像socket.io这样的东西，但它也会对服务器端造成后果。

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

注2：在插入新点时，Highchart似乎不需要重新绘制图表。 见http://www.highcharts.com/documentation/how-to-use\#live-charts

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, 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).

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).

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.

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

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

相关问答

转到jqplot图表它支持所有设备并包含缩放，点击支持也是免费的 Go for jqplot charts it supports all devices and contain zoom, on click support as well and its free too

根据经验：如果它在移动浏览器上运行，它将在包装到应用程序时起作用。 对于实际包装，您有几种选择： 使用webview创建应用程序，并在本地包含设备中的HTML。 使用PhoneGap或Titanium为您执行此操作并公开JavaScript API以便您与设备进行通信。 重要的是要了解您的应用程序不会被“转换”为本机代码，而是作为应用程序中的网站运行(使用javascript和css)，其中站点的文件存储在应用程序包中。 据我所知，您不能使用MySQL，因为这需要连接到远程MySQL服务器的Int

...

您可以尝试OxyPlot 。 它是免费的，当然足够快，你想要的东西，并且相当容易使用。 You might try OxyPlot. It's free, certainly fast enough for what you want, and fairly easy to use.

有几个图表库可以使用： gRaphael ， Highcharts和其他提到的图表。 这些图书馆非常易于使用和记录良好(让我们说难点比例为1)。 AFAIK，这些库并不是“实时的”，因为它们不能在飞行中添加新的点。 要添加新的点，您需要重新绘制完整的图表。 但是我认为这不是一个问题，因为重绘图表很快。 我已经用gRaphael做了一些尝试，我没有注意到这种方法有任何问题。 如果你的更新速率是10s应该可以正常工作(但它可能取决于你的图表的复杂性)。 如果重绘全图是一个问题，您可能需要使用像Raph

...

将DateTime.Now添加到图表时，使用ToADate返回double 。 解析日期字符串时，请尝试将生成的DateTime作为图表上的一个点添加。 如果您想要等效功能，则需要转换解析日期，就像使用第一个一样： String s = "11/4/2014\_18:36";

DateTime.TryParseExact(s, "MM/d/yyyy\_HH:mm", null, DateTimeStyles.None, out timeStamp);

chart1.Series\["Change"\].P

...

它本身并不是从原点那里汲取的。 事实上，方程式抽屉甚至不知道存在轴。 该函数只是根据它对画布的了解而绘制。 它知道画布宽度，它知道你告诉它将画布宽度划分为多少“单位”(在这种情况下为20x20，因为每个轴上的“比例”从-10到10;这些参数在minX中提供， minY等)。 它可以在中心(上下文)逐个像素地绘制事物，从-minX(向左侧的偏移)开始并向前进行到maxX(向右偏移)，然后基于它“缩放”它。每个比例单位的像素数。 在这种情况下，这种情况会以略微不同的顺序发生(在绘制之前，在第136行应

...

尝试将putImageData和putImageData的计算包装到setTimeout调用以异步执行它(post accept edit：查看问题中的最终代码，这将无效，因为i将在putImageData行中undefined ) public draw() \{

var that = this;

var drawRow = function() \{

for(var j: number = 0; j < that.Size.Width; ++j) \{ //

...

您需要将带有值的label键放到对象上。 这是一个jsFiddle 。 dataPoints: \[\{

x: new Date(2012, 00, 1),

y: 450,

label: '2012-00-01'

\}, \{

x: new Date(2012, 01, 1),

y: 414,

label: '2012-01-01'

\}, \{

x: new Date(2012, 02, 1),

...

在某种程度上，这取决于，它取决于几个因素： 你需要更新的物品数量(你在说10s，100s，1000s或更多) 您想要更新的频率将是一个重要因素，您将根据浏览器执行JavaScript的速度进行限制。 浏览器 - 某些浏览器可以以非常不同的速度呈现内容。 比较的一个很好的例子是看一些D3性能比较。 因为核心库在底层执行相同的工作，所以这是比较SVG(基于DOM)和Canvas渲染之间的渲染速度。 首先看看这两个swarm示例： 画布群 SVG Swarm 如果你开始扩大频率和Canvas的性能优于S

...

您可以在循环中使用addPoint来通过JSON中的所有数据点。 将所有点重新添加后，将redraw参数设置为false并重新绘制图表： load: function() \{

var chart = this;

setInterval(function() \{

chart.series.forEach(function(s) \{

for (var i = 0; i < 20; i++) \{

s.addPoint(Math.rand

...