Loading [MathJax]/jax/input/TeX/config.js
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >问答首页 >如何每隔一段时间更新jquery选项卡中的图表

问如何每隔一段时间更新jquery选项卡中的图表
EN

Stack Overflow用户
提问于 2021-04-12 12:06:50
回答 1查看 24关注 0票数 0

我正在尝试对图表使用jquery选项卡，但在按时间间隔自动更新图表时遇到问题。我观察到，图表只有在我从一个选项卡切换到另一个选项卡并切换回来时才会更新。$dataPoints1和$dataPoints2是从一个文件中收集的，并且工作得很好。

查看我的选项卡设置：

​

我之前的代码(数据在$dataPoints1 &$dataPoints2中)：

代码语言：javascript
运行
AI代码解释
复制
<script>
        window.onload = function() {
            var updateInterval = 1500;
            var chart1 = {
                animationEnabled: true,
                zoomEnabled: true,
                theme: "light2",
                title: {
                    text: "Room temperature",
                    fontSize: 22
                },
                axisX:{
                    title: "chart updates every " + updateInterval / 1000 + " secs"
                },
                axisY:{
                    suffix: " C"
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor:"pointer",
                    verticalAlign: "top",
                    fontSize: 18,
                    fontColor: "dimGrey",
                    itemclick : toggleDataSeries1
                },
                data: [{
                    type: "line",
                    yValueFormatString: "##.##",
                    xValueFormatString: "hh:mm:ss TT",
                    showInLegend: true,
                    legendText: "{name} " + yValue1 + " C",
                    toolTipContent: "{y} C",
                    dataPoints: $dataPoints1
                }]
            }
    
            var chart2 = {
                animationEnabled: true,
                zoomEnabled: true,
                theme: "light2",
                title: {
                    text: "Barometric pressure",
                    fontSize: 22
                },
                axisX:{
                    title: "chart updates every " + updateInterval / 1000 + " secs"
                },
                axisY:{
                    suffix: " hPA"
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor:"pointer",
                    verticalAlign: "top",
                    fontSize: 18,
                    fontColor: "dimGrey",
                    itemclick : toggleDataSeries2
                },
                data: [{
                    type: "line",
                    yValueFormatString: "##.##",
                    xValueFormatString: "hh:mm:ss TT",
                    showInLegend: true,
                    legendText: "{name} " + yValue2 + " hPA",
                    toolTipContent: "{y} hPA",
                    dataPoints: $dataPoints2
                }]
            }

            setInterval(function () { updateChart() }, updateInterval);
        
            var xValue1 = $dataPoints1.length;
            var yValue1 = $dataPoints1[$dataPoints1.length - 1].y;
        
            var xValue2 = $dataPoints2.length;
            var yValue2 = $dataPoints2[$dataPoints2.length - 1].y;

            function toggleDataSeries1(e) {
                if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                }
                else {
                    e.dataSeries.visible = true;
                }
                chart1.render();
            }
        
            function toggleDataSeries2(e) {
                if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                }
                else {
                    e.dataSeries.visible = true;
                }
                chart2.render();
            }

            function updateChart() {
                yValue1 += (Math.random() - 0.5) * 0.1;
                yValue2 += (Math.random() - 0.5) * 0.1;
                $dataPoints1.push({ x: xValue1, y: yValue1 });
                $dataPoints2.push({ x: xValue2, y: yValue2 });
                xValue1++;
                xValue2++;
                chart1.options.data[0].legendText = "Temperature " + yValue1.toFixed(2) + " C";
                chart2.options.data[0].legendText = "Barometric " + yValue2.toFixed(2) + " hPA";
                chart1.render();
                chart2.render();
            };
    
            $("#tabs").tabs(
                {
                    create: function (event, ui) {
                        //Render Charts after tabs have been created.
                        $("#chartContainer11").CanvasJSChart(chart1);
                        $("#chartContainer12").CanvasJSChart(chart2);
                    },
                    activate: function (event, ui) {
                        //Updates the chart to its container size if it has changed.
                        ui.newPanel.children().first().CanvasJSChart().render();
                    }
                }
            );
        };
</scritp>

<body>
    <div id="tabs" style="height: 360px">
        <ul>
            <li ><a href="#tabs-1" style="font-size: 12px">Client -1-</a></li>
            <li ><a href="#tabs-2"  style="font-size: 12px">Client -2-</a></li>
        </ul>
        <div id="tabs-1" style="height: 300px">
            <div id="chartContainer11" style="width: 48%; height: 350px;display: inline-block;"></div>
            <div id="chartContainer12" style="width: 48%; height: 350px;display: inline-block;"></div><br/>
            <div id="chartContainer13" style="width: 48%; height: 350px;display: inline-block;"></div>
            <div id="chartContainer14" style="width: 48%; height: 350px;display: inline-block;"></div>
        </div>
        <div id="tabs-2" style="height: 300px">
            <div id="chartContainer21" style="width: 48%; height: 350px;display: inline-block;"></div>
            <div id="chartContainer22" style="width: 48%; height: 350px;display: inline-block;"></div><br/>
            <div id="chartContainer23" style="width: 48%; height: 350px;display: inline-block;"></div>
            <div id="chartContainer24" style="width: 48%; height: 350px;display: inline-block;"></div>
        </div>
    </div>

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery-ui.1.11.2.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

</body>

我的错误在哪里？

更新:我接受了@VishwasR的建议，现在有了一个可行的解决方案，但我还有一个问题。如果Client2没有显示任何内容，我怎么能不执行activate: function (event，ui)部分？现在，当我切换到Client2时，我得到了下面的错误，因为没有创建图表：

代码语言：javascript
运行
AI代码解释
复制
Uncaught TypeError: ui.newPanel.children().first().CanvasJSChart() is undefined
javascript
jquery
canvasjs
EN

回答 1

Stack Overflow用户

发布于 2021-04-14 06:23:58

您似乎混淆了chart & chart-options。您将选项存储在chart1和chart2变量中，但试图通过将其调用为chart1.render() & chart2.render()来呈现图表。在创建后立即存储chart1和chart2并每1.5秒更新一次似乎工作得很好。下面是工作代码(JSFiddle)。

​

代码语言：javascript
运行
AI代码解释
复制
var updateInterval = 1500;
var dataPoints1 = [], dataPoints2 = [], chart1, chart2;
var options1 = {
  animationEnabled: true,
  zoomEnabled: true,
  theme: "light2",
  title: {
    text: "Room temperature",
    fontSize: 22
  },
  axisX:{
    title: "chart updates every " + updateInterval / 1000 + " secs"
  },
  axisY:{
    suffix: " C"
  },
  toolTip: {
    shared: true
  },
  legend: {
    cursor:"pointer",
    verticalAlign: "top",
    fontSize: 18,
    fontColor: "dimGrey",
    itemclick : toggleDataSeries1
  },
  data: [{
    type: "line",
    yValueFormatString: "##.##",
    xValueFormatString: "hh:mm:ss TT",
    showInLegend: true,
    legendText: "{name} " + yValue1 + " C",
    toolTipContent: "{y} C",
    dataPoints: dataPoints1
  }]
}

var options2 = {
  animationEnabled: true,
  zoomEnabled: true,
  theme: "light2",
  title: {
    text: "Barometric pressure",
    fontSize: 22
  },
  axisX:{
    title: "chart updates every " + updateInterval / 1000 + " secs"
  },
  axisY:{
    suffix: " hPA"
  },
  toolTip: {
    shared: true
  },
  legend: {
    cursor:"pointer",
    verticalAlign: "top",
    fontSize: 18,
    fontColor: "dimGrey",
    itemclick : toggleDataSeries2
  },
  data: [{
    type: "line",
    yValueFormatString: "##.##",
    xValueFormatString: "hh:mm:ss TT",
    showInLegend: true,
    legendText: "{name} " + yValue2 + " hPA",
    toolTipContent: "{y} hPA",
    dataPoints: dataPoints2
  }]
}

function toggleDataSeries1(e) {
  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
  }
  else {
    e.dataSeries.visible = true;
  }
  chart1.render();
}

function toggleDataSeries2(e) {
  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
  }
  else {
    e.dataSeries.visible = true;
  }
  chart2.render();
}

var xValue1 = 0, yValue1 = 100, xValue2 = 0, yValue2 = 100;
function updateChart() {
  yValue1 += (Math.random() - 0.5) * 0.1;
  yValue2 += (Math.random() - 0.5) * 0.1;
  dataPoints1.push({ x: xValue1, y: yValue1 });
  dataPoints2.push({ x: xValue2, y: yValue2 });
  xValue1++;
  xValue2++;
  chart1.options.data[0].legendText = "Temperature " + yValue1.toFixed(2) + " C";
  chart2.options.data[0].legendText = "Barometric " + yValue2.toFixed(2) + " hPA";
  chart1.render();
  chart2.render();
};

$("#tabs").tabs(
  {
    create: function (event, ui) {
      //Render Charts after tabs have been created.
      $("#chartContainer11").CanvasJSChart(options1);
      $("#chartContainer12").CanvasJSChart(options2);
      chart1 =  $("#chartContainer11").CanvasJSChart();
        chart2 =  $("#chartContainer12").CanvasJSChart();  
      setInterval(function () { updateChart() }, updateInterval);
    },
    activate: function (event, ui) {
      //Updates the chart to its container size if it has changed.
      ui.newPanel.children().first().CanvasJSChart().render();
    }
  }
);
代码语言：javascript
运行
AI代码解释
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery-ui.1.11.2.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<link href="https://canvasjs.com/assets/css/jquery-ui.1.11.2.min.css" rel="stylesheet"/>

<div id="tabs" style="height: 360px">
        <ul>
            <li ><a href="#tabs-1" style="font-size: 12px">Client -1-</a></li>
            <li ><a href="#tabs-2"  style="font-size: 12px">Client -2-</a></li>
        </ul>
        <div id="tabs-1" style="height: 300px">
            <div id="chartContainer11" style="width: 100%; height: 300px;display: inline-block;"></div>
        </div>
        <div id="tabs-2" style="height: 300px">
            <div id="chartContainer12" style="width: 100%; height: 300px;display: inline-block;"></div>
        </div>
    </div>

​

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

https://stackoverflow.com/questions/67058069

复制
相关文章
jQuery 选项卡插件 FengTab by FungLeo
csshtml插件
好无聊啊，权当练手，写了一个选项卡插件 Html 结构 <h2>Demo 1</h2> <div id="FengTab" class="FengTab"> <ul class="tab"> <li>Title 1</li> <li>Title 2</li> <li>Title 3</li> <li>Title 4</li> </ul> <div c
FungLeo
2022/11/28
1.4K0
[MySQL]更新时间（加上或者减去一段时间）
数据库云数据库 SQL Serversql
定义和用法 DATE_ADD() 函数向日期添加指定的时间间隔。 DATE_SUB() 函数向日期减少指定的时间间隔。 语法 DATE_ADD(date,INTERVAL expr type) DATE_SUB(date,INTERVAL expr type)
用户2353021
2020/05/11
3.9K0
[MySQL]更新时间（加上或者减去一段时间）
crontab中如何实现每隔多少天执行一次脚本
apachebashbash 指令
1. # 下午6点到早上6点，每隔15分钟执行一次脚本 0,15,30,45 18-06 * * * /bin/bash $HOME/script.sh > /dev/null 2>&1# 每两小时，重启一次服务* */2 * * * /etc/init.d/apache2 restart
拓荒者
2019/07/01
9.1K0
crontab中如何实现每隔多少天执行一次脚本
jQuery 对AMD的支持（Require.js中如何使用jQuery）
jqueryjquery uijavascript
AMD（异步模块定义，Asynchronous Module Definition）格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案。
李维亮
2021/07/09
3.7K0
如何发送Excel中图表到邮件
httpshtml
方案一：使用类似Excel中图表的第三方前端图表例如Echart等,填充数据到Echart,然后保存为图片,发送 邮件。问题是Echart等图表与Excel中图表有差别。
宜信技术学院
2019/06/28
1.7K0
jQuery：详解jQuery中的事件（一）
jqueryjavascripthtml
之前用过一些jQuery的动画和特效，但是用到的部分也不超过10%的样子，感觉好浪费啊——当然浪费的不是jQuery，而是Web资源。后来就想深入研究下jQuery的内部机理，读过两遍jQuery源代码，但是自觉还差的好远，跟好多大神（比如阮一峰）的理解还是有很大差距。现在就一点一点积累自己的知识体系，记录自己学到的和自己所理解的jQuery。
王金龙
2019/02/25
1.8K0
jQuery：详解jQuery中的事件（二）
jquery
　　上一篇讲到jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。
王金龙
2019/02/25
2.3K0
jQuery中的Ajax
ajax编程算法httpjqueryide
相同点: 都是将数据提交到远程服务器 不同点: 1. 提交数据存储的位置不同 GET请求会将数据放到URL后面 POST请求会将数据放到请求头中 2. 提交数据大小限制不同 GET请求对数据有大小限制 POST请求对数据没有大小限制
不愿意做鱼的小鲸鱼
2022/08/24
1.4K0
JQuery中的动画
其他
  这两种方法是jQuery动画的最基本方法。当为元素调用show方法时相当于将该元素的display样式改为block或者inline，同理，如果当元素调用hide方法时，相当于将该元素的样式改为none；因此：$("element").hide()等同于$("element").css("display","none");
小小许
2018/09/20
2.8K0
JQuery实现双击编辑异步更新
其他
<script type="text/javascript"> $(function(){ $("tbody>tr>td").dblclick(function(){ var inval=$(this).html();//获取内容 var keyword=$(this).attr("key");//获取要更新的字段 var upid=$(this).parents().attr("index");//获取更新哪一行 $(this).html("<input id=’edit"+keyw
苦咖啡
2018/05/07
1.5K0
如何更新Kubernetes中的资源对象的Label
kubernetes
以下是一个简单示例的Go程序，演示了如何使用Kubernetes客户端库来批量更新Pod资源对象的Label：
一凡sir
2023/09/10
4960
如何更新Kubernetes中的资源对象的Label
如何在小程序中绘制图表？
小程序微信api
文 | musiq1989 由于微信小程序本身框架的限制，很难集成目前已有的图表工具，显示图表目前有两种方案： 服务器端渲染图表，输出图片，微信小程序中直接显示渲染好的图片； 利用微信小程序 API 中提供的 canvas 组件支持，自行绘制图表。 前一种方案已经有非常多类似服务可选，比如 Highcharts 提供了服务端渲染的能力。但这种方式需要后台有一套渲染服务，并且有一定的网络开销。 那么，如何利用 canvas 组件，在小程序中绘制图表呢？下面，我们就来看尝试一下。 API 首先，我们在模板文件中
知晓君
2018/06/28
1.5K0
如何在Mac上的软件更新中隐藏MacOS Catalina更新提示
mac osbashbash 指令
有好多小伙伴不愿意升级到MacOS Catalina，但是电脑上有系统更新的红点，那么怎么去除呢，下面教大家如何在Mac上的软件更新中隐藏MacOS Catalina，Mac取消系统更新的红点。
MAC先森
2019/10/21
5.6K0
jquery中的ajax写法_jquery中get和post提交的区别
互联网全栈
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
全栈程序员站长
2022/11/10
1.4K0
[译] 如何更新 package.json 中的依赖项
npmjavascript编程算法
原文：https://medium.com/better-programming/how-to-upgrade-dependencies-in-package-json-e5546804187f
江米小枣
2020/06/15
5.3K0
jQuery中的DOM操作
jquery
该文介绍了DOM操作的分类，包括查找节点、创建节点、插入节点、删除节点、替换节点、包裹节点、复制节点、替换节点和节点互换。使用DOM操作可以更加方便地操作HTML和CSS，实现各种动态效果和交互功能。
IMWeb前端团队
2017/12/29
1.5K0
jQuery中的DOM操作
jquery
查找属性节点（通过jq选择器），操作属性节点（attr（‘属性名’,’属性值’））， 操作文本节点（text（））读/写
IMWeb前端团队
2019/12/03
1.3K0
jQuery中$符号的实质
jquerydomfunction对象字符串
其实就是一个函数，以后用的时候，记得跟小括号 参数不同，功能就不同。3种用法： 参数是一个function, 入口函数 $(function () { }); $(domobj) 把dom对象转换成jquery对象 $(document).ready(function () { }); 参数是一个字符串,用来找对象 $("div") $("div ul") $(".current") 案例：检测$符号类型 <!DOCTYPE html> <html lang="zh-CN"> <h
兮动人
2021/06/11
3.8K0
jQuery中$符号的实质
jQuery中this与$(this)的区别
jqueryhtml
jQuery中this与$(this)的区别 $("#textbox").hover(         function() {              this.title = "Test";         },         fucntion() {             this.title = "OK”;         }   );  这里的this其实是一个Html 元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。 但是如果将this换成$(thi
用户1258909
2018/07/03
8310
点击加载更多

相似问题

如何每隔一段时间滚动kubernetes更新

48

每隔一段时间刷新更新面板

35

jQuery每隔一段时间添加类

30

每隔一段时间通过抽射更新内容

13

如何每隔5秒自动更新图表的X轴？

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档