如何通过ASP.NET highcharts显示实时图表 [英] How to show real-time chart via ASP.NET highcharts
本文介绍了如何通过ASP.NET highcharts显示实时图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好
我希望通过Asp.Net组件显示实时图表highcharts
当使用AjaxControl的控制计时器和UpdatePanel不能正常工作时
< script type = text / javascript>
$（ function （）{
$（ document ）。ready（< span class =code-keyword> function （）{
var ZZ = 0 ;
var Z = 0 ;
setInterval（ function （）{
ZZ = parseInt （ document .getElementById（ MeMeMe）。innerHTML）;
Z = Z / < span class =code-digit> 2 ;
}， 1000 ）;
Highcharts.setOptions（{
global：{
useUTC： true
}
}）;
$（' ＃container'）。highcharts（{
chart：{
type：< span class =code-string>' spline'，
animation：Highcharts.svg，
marginRight： 10 ，
事件：{
load： function （）{
var series = this .series [ 0 ];
setInterval（ function （）{
var x =（ new Date （））。getTime（），
y = ZZ;
series.addPoint（[ x，y]， true ， true ）;
}， 1000 ）;
}
}
}，
title：{
text：' 实时随机数据'
}，
xAxis：{
类型：' datetime'，
tickPixelInterval： 550 ，
tickInterval： 2000 ，
}，
yAxis：{
title：{
text：' Value'
}，
plotLines：[{
value： 0 ，
宽度： 1 ，
颜色：' ＃818121'
}]
}，
工具提示：{
格式化程序： function （）{
return ' < b>' + 此 .series.name + ' < / b>< br />' +
Highcharts.dateFormat（' ％Y-％m-％d％H：％M：％S'， this .x）+ ' < br />' +
Highcharts.numberFormat（ this .y， 2 ）;
}
}，
图例：{
已启用： false
}，
导出：{
已启用： false
}，
系列：[{
name：' Random'，
data：（ function （）{
// 生成随机数据数组
var data = []，
time =（ new 日期（））。getTime（），
i;
for （i = -20; i&l t; = 0 ; i + = 1 ）{
data.push（{
x：time + i * 1000 ，
y：ZZ
}）;
}
返回数据;
}（））
}，{
name：' 我'，
data：（ function （）{
// 生成随机数据数组
var data = []，
time =（< span class =code-keyword> new Date （））。getTime（），
i;
for （i = -20; i< = 0 ; i + = 1 ）{
data.push（{
x：time + i * 1000 ，
y： 数学 .random（）
}）;
}
返回数据;
}（））
}]
}）;
}）;
}）;
< / script>
此脚本在一个图表中显示20行20积分，但我想要1000毫秒设定点在线
请帮助或显示示例代码
问候Yarian
非常感谢所有编程
我尝试过：
用于演示代码检查以下链接
样条更新每秒|
Highcharts [ ^ ]
解决方案
（ function （）{
（ document ）。ready（ function （）{
var ZZ = 0 ;
var Z = 0 ;
setInterval（ function （）{
ZZ = parseInt （ document .getElementById（ MeMeMe）。innerHTML）;
Z = Z / 2 ;
}， 1000 ）;
Highcharts.setOpt离子（{
global：{
useUTC： true
}
}）;
（' ＃container'）。highcharts（{
chart：{
类型：' spline'，
animation：Highcharts.svg，
marginRight： 10 ，
事件：{
load： function （）{
var series = this .series [ 0 ];
setInterval（ function （）{
var x =（ new Date （））。getTime（），
y = ZZ;
series.addPoint（[ x，y]， true ， true ）;
}， 1000 ）;
}
}
}，
title：{
text：' 实时随机数据'
}，
xAxis：{
类型：' datetime'，
tickPixelInterval： 550 ，
tickInterval： 2000 ，
}，
yAxis：{
title：{
text：' Value'
}，
plotLines：[{
value： 0 ，
宽度： 1 ，
颜色：' ＃818121'
}]
}，
工具提示：{
格式化程序： function （）{
return ' < b>' + 此 .series.name + ' < / b>< br />' +
Highcharts.dateFormat（' ％Y-％m-％d％H：％M：％S'， this .x）+ ' < br />' +
Highcharts.numberFormat（ this .y， 2 ）;
}
}，
图例：{
已启用： false
}，
导出：{
已启用： false
}，
系列：[{
name：' Random'，
data：（ function （）{
// 生成随机数据数组
var data = []，
time =（ new 日期（））。getTime（），
i;
for （i = -20; i&l t; = 0 ; i + = 1 ）{
data.push（{
x：time + i * 1000 ，
y：ZZ
}）;
}
返回数据;
}（））
}，{
name：' 我'，
data：（ function （）{
// 生成随机数据数组
var data = []，
time =（< span class =code-keyword> new Date （））。getTime（），
i;
for （i = -20; i< = 0 ; i + = 1 ）{
data.push（{
x：time + i * 1000 ，
y： 数学 .random（）
}）;
}
返回数据;
}（））
}]
}）;
}）;
}）;
< / script>
此脚本在一个图表中显示20行20积分，但我想要1000毫秒设定点在线
请帮助或显示示例代码
问候Yarian
非常感谢所有编程
我尝试过：
用于演示代码检查以下链接
样条更新每秒|
Highcharts [ ^
Hello
I Want Show Real-Time Chart Via Asp.Net Component highcharts
When Used Control Timer And UpdatePanel Of AjaxControl Not Working True
<script type="text/javascript">
$(function () {
$(document).ready(function () {
var ZZ = 0;
var Z = 0;
setInterval(function () {
ZZ = parseInt(document.getElementById("MeMeMe").innerHTML);
Z = Z / 2;
}, 1000);
Highcharts.setOptions({
global: {
useUTC: true
}
});
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function () {
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(),
y = ZZ;
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 550,
tickInterval: 2000,
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#818121'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -20; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: ZZ
});
}
return data;
}())
}, {
name: 'Me',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -20; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
});
</script>
this script show two line in one chart for 20 points but i want ever 1000 miliseconds set points in line
Please Help Or Show Me Sample Code
Regards Yarian
Thanks Very Much For All Programming
What I have tried:
for demo code check below link
Spline updating each second |
Highcharts[^]
解决方案
(function () {
(document).ready(function () { var ZZ = 0; var Z = 0; setInterval(function () { ZZ = parseInt(document.getElementById("MeMeMe").innerHTML); Z = Z / 2; }, 1000); Highcharts.setOptions({ global: { useUTC: true } });
('#container').highcharts({ chart: { type: 'spline', animation: Highcharts.svg, marginRight: 10, events: { load: function () { var series = this.series[0]; setInterval(function () { var x = (new Date()).getTime(), y = ZZ; series.addPoint([x, y], true, true); }, 1000); } } }, title: { text: 'Live random data' }, xAxis: { type: 'datetime', tickPixelInterval: 550, tickInterval: 2000, }, yAxis: { title: { text: 'Value' }, plotLines: [{ value: 0, width: 1, color: '#818121' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: 'Random', data: (function () { // generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -20; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: ZZ }); } return data; }()) }, { name: 'Me', data: (function () { // generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -20; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; }()) }] }); }); }); </script>
this script show two line in one chart for 20 points but i want ever 1000 miliseconds set points in line
Please Help Or Show Me Sample Code
Regards Yarian
Thanks Very Much For All Programming
What I have tried:
for demo code check below link
Spline updating each second |
Highcharts[^]
这篇关于如何通过ASP.NET highcharts显示实时图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
