首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何以给定的间隔重新呈现从Rails中的控制器检索数据的图形?

如何以给定的间隔重新呈现从Rails中的控制器检索数据的图形?
EN

Stack Overflow用户
提问于 2012-01-15 06:41:20
回答 2查看 1.5K关注 0票数 0

我有一个Highchart的图表,需要每分钟重新生成一次。我很好奇如何刷新下面的图表?http://pastebin.com/bEwkX8Fk

我认为刷新div可能就足够了,但经过进一步的思考,我意识到我可能必须从控制器发起某种调用来更新图形的数据。这里有什么关于正确方法的想法吗?

我现在在想,也许用Highcharts的json功能更新它是最好的,但我还不确定从哪里开始。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-01-16 07:08:46

您需要设置一个到服务器的ajax请求,该服务器每隔X毫秒轮询一次,最好使用下面这样的jquery。

代码语言:javascript
运行
AI代码解释
复制
var ajax_path = #{action_controller_path}
function pollData() {
  $.ajax({
    type: 'get',
    url: ajax_path,
    success: function(data) {
      // update chart
      var series = chart.series[0],
            shift = series.data.length > 20; // shift if the series is longer than 20          
      chart.series[0].addPoint(data, true, shift);

      setTimeout(pollData, 60000) // Poll data every 60s
    }
  });
}

在rails端,您将需要创建一个Controller#action来提供此ajax请求,请记住将您的responds_to设置为包含json。大体如此,请“照原样”理解这段代码:

代码语言:javascript
运行
AI代码解释
复制
respond_to :json, only: [:polling_action]
def polling_action
  @data_point = Model.get_data
  respond_with @data_point
end

我认为如何实际更新图表的细节在@nikita-beloglazov引用的文章中有所说明:http://www.highcharts.com/documentation/how-to-use,这里的http://www.highcharts.com/ref/#series-object用于addPoint (对象选项,布尔重绘,布尔移位,混合动画) api参考,这是您在使用ajax轮询方法加载数据点后应该调用的。

注意:请记住,除非您知道更新数据的时间间隔,否则轮询数据不是一个非常有效的过程。考虑到您只需要每隔60秒更新一次此数据,这可能不是问题,但只需将其发布给其他可能会遇到此问题的人。

票数 1
EN

Stack Overflow用户

发布于 2012-01-15 08:27:59

文档中有一个更新highchart的示例:http://www.highcharts.com/documentation/how-to-use。只需在控制器中实现方法,为图表返回适当的数据即可。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8868015

复制
相关文章
jQuery 图像裁剪插件Jcrop
Jcrop简介 Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:PHP)可以快速的实现图片裁剪的功能。 Jcrop是一款免费的软件,采用MIT License发布。
静默虚空
2018/01/05
1.8K0
jQuery 图像裁剪插件Jcrop
[记]使用jQuery Jcrop 图像裁剪无法更换图片的坑
​ 因为公司需求,需要完成一个显示屏定制的业务,用户自主上传图片然后在线裁剪的功能,我选择了jQuery Jcrop这个插件。 先看看怎么使用 使用方法 载入 CSS 文件 <link rel="stylesheet" href="jquery.Jcrop.css"> 载入 JavaScript 文件 <script src="jquery.js"></script> <script src="jquery.Jcrop.js"></script> 给 IMG 标签加上 ID <img id="e
游魂
2018/06/08
1.7K0
[UWP]使用CompositionGeometricClip裁剪复杂图形及进行动画
之前在 这篇文章 里,我介绍了如何使用UIElement.Clip裁剪UIElement的内容,使用代码如下:
dino.c
2019/12/12
7960
[UWP]使用CompositionGeometricClip裁剪复杂图形及进行动画
使用Python对视频任意矩形区域进行裁剪
功能描述: 裁剪视频任意矩形区域。 参考代码: 运行方式,切换到cmd执行程序:
Python小屋屋主
2020/04/01
1.1K0
Python综合Web案例_在线为头像添加装饰第二步:上传头像, 并实时裁剪第三步: 生成图片,长按保存
前几天元旦, 用Python为自家公众号做了一个"革面"的活动页面,活动的效果非常好,分享一下实现过程 前端: BootStrap, Jquery, Jcrop 后端: Django, Pillow
zhaoolee
2018/04/19
1.5K0
Python综合Web案例_在线为头像添加装饰第二步:上传头像, 并实时裁剪第三步: 生成图片,长按保存
使用libyuv对YUV数据进行缩放,旋转,镜像,裁剪等操作
在Android做过自定义Camera的朋友应该都知道,我们可以通过public void onPreviewFrame(byte[] data, Camera camera)回调中获取摄像头采集到的每一帧的数据,但是这个byte[] data的数据格式YUV的,并不能直接给我们进行使用,那么该通过什么样的方法对这个YUV数据进行处理呢?
音视频开发进阶
2020/07/15
4.9K0
使用libyuv对YUV数据进行缩放,旋转,镜像,裁剪等操作
nodejs图片裁剪、水印(使用images)
/** * Created by chaozhou on 2015/9/21. */ var images = require("images"); /** * 缩放图像 * @param
用户1141560
2017/12/26
2.3K0
ThinkPHP-图片上传和裁剪
图片上传是指将本地计算机中的图片传输到服务器上。在 ThinkPHP 中,我们可以使用 PHP 自带的 $_FILES 变量来实现图片上传。具体步骤如下:
堕落飞鸟
2023/05/03
1.2K0
项目资源太紧张了,如何根据map信息进行功能裁剪和优化?
前阵子开源了一个基于TencentOS tiny物联网操作系统的危险气体探测仪项目,截止目前在Gitee上斩获了24个Star以及8个Fork,该项目也成功被Gitee官方推荐为优质开源项目。
杨源鑫
2020/11/25
6210
项目资源太紧张了,如何根据map信息进行功能裁剪和优化?
Android图片裁剪之自由裁剪
  客户的需求都是非常怪的。我有时候在给客户做项目的时候就想骂客户是sb。可是请你相信我,等你有需求,自己变成客户的时候,给你做项目的哥哥肯定也会骂你是sb。
全栈程序员站长
2022/07/12
2.6K0
Android图片裁剪之自由裁剪
全志Tina Linux 系统裁剪 boot0裁剪 uboot裁剪 内核裁剪 文件系统裁剪 C库裁剪 文件系统压缩
嵌入式产品往往为了压缩成本而使用较小的flash存储器,因此可能需要对系统进行裁剪来减少对flash的占用。系统经过裁剪过后,通常也会提升启动速度以及减少内存占用。 本文介绍TinaLinux中系统裁剪的方法,为有裁剪需求的使用者提供参考。
韦东山
2022/12/28
8.8K0
小型电裁剪刀_手动裁剪
由于简书经常打不开,或者打开慢,不靠谱,还是把文章迁移到CSDN吧。 简书链接:https://www.jianshu.com/p/8c6508cab763 有时候想对摄像头采集的视频流进行区域裁剪,可以使用libyuv这个库,原理就是先把NV12转换为i420,对i420做裁剪,然后再把i420转换为NV12,NV12再转换为CVPixelBufferRef,CVPixelBufferRef再转换为CMSampleBufferRef。
全栈程序员站长
2022/11/08
1.5K0
java开发_jcrop_网页截图工具(插件)
===========================================
Hongten
2018/09/13
1.3K0
java开发_jcrop_网页截图工具(插件)
CropBox实现功能相对较少,操作更简单
流的前端jQuery 图像裁剪插件有Jcrop和CropBox,前者是将原图和需要裁剪的参数(裁剪的各点坐标,旋转角度等)传到后台,然后由后台完成实际的裁剪和后续操作。 CropBox实现功能相对较少,但操作更简单,它的原理是: 将裁减后的图片通过base64编码,然后转化为blob格式发送到服务器,服务器完成解码即可,官网介绍可以看github上的说明和Demo 核心js函数只有两个: getDataURL 将裁剪后的图片简单以base64编码后的结果,用于实时预览,当然也可以将它直接传到服务器,然后解码为png格式 getBlob 上传图片为Blob格式
用户1503405
2021/10/07
4630
使用KNN进行分类和回归
一般情况下k-Nearest Neighbor (KNN)都是用来解决分类的问题,其实KNN是一种可以应用于数据分类和预测的简单算法,本文中我们将它与简单的线性回归进行比较。
deephub
2022/11/11
1K0
使用KNN进行分类和回归
JAVA通过BufferedImage进行图片的绘制,缩放,裁剪,水印等操作
最近开发当中,通过JAVA对图片进行了很多的操作,之前很少接触这方面的知识,特此记录下来
海加尔金鹰
2020/06/08
13.2K0
Basemap系列教程:使用 shapefiles 文件裁剪栅格
此例使用了STRM的海拔数据。只要了解一下网站设置,很容易使用 ,当然也可以直接下载数据[注1-2]。
bugsuse
2020/04/20
1.8K1
图像裁剪
PNG (460, 460) RGB {'srgb': 0, 'gamma': 0.45455, 'dpi': (96, 96)} None
裴来凡
2022/05/29
1.7K0
图像裁剪
点击加载更多

相似问题

Carrierwave和Jcrop和Devise,Jcrop不裁剪

11

使用Jcrop和Imagemagick裁剪图像

21

使用jcrop和java裁剪图像

20

使用JCrop裁剪多张图片

11

JCrop裁剪的宽度和高度

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文