Javascript 向高端图表添加动态数据系列
×212414 ×123754 我正在调用codebehind.aspx.cs文件中的PageMethod，它在aspx页面的javascript代码中返回一个字符串数组[]。目前的问题是字符串数组从WEB服务返回时间（X轴值）、数据/名称（Y轴值）、类型（定义图表的类型（样条线或列））。我正在使用这些数据将系列动态添加到图表中。使用函数chart.AddSeries（），但我无法这样做 有谁能告诉我怎么做，我想在做了这件事后给这个系列增加一些分数 请注意，我将在同一图表上显示类型{样条线和列}Javascript 向高端图表添加动态数据系列,javascript,dynamic,highcharts,updates,spline,Javascript,Dynamic,Highcharts,Updates,Spline,×212414 ×123754 我正在调用codebehind.aspx.cs文件中的PageMethod，它在aspx页面的javascript代码中返回一个字符串数组[]。目前的问题是字符串数组从WEB服务返回时间（X轴值）、数据/名称（Y轴值）、类型（定义图表的类型（样条线或列））。我正在使用这些数据将系列动态添加到图表中。使用函数chart.AddSeries（），但我无法这样做 有谁能告诉我怎么做，我想在做了这件事后给这个系列增加一些分数 请注意，我将在同一图表上显示类型{样条线和列}
<script type="text/javascript">
alert("Bingo");
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'ltrChart',
type: 'spline',
marginRight: 10,
events: {
load: function () {
PageMethods.GetSingleValue(function (result) {
var Name = new Array();
var Type = new Array();
var Data = new Array();
var Time = new Array();
var Ser = chart.series;
for (var i = 0; i < 6; i++) {
Type[i] = result[i].split('-')[0];
Name[i] = result[i].split('-')[1];
Data[i] = result[i].split('-')[2];
Time[i] = result[i].split('-')[3];
chart.addSeries({ name :Name[i], data : [ [Time[i], Data[i]] ] }, true, true);
/* Test Method To ensure data Fetching */
// alert(Type[i] + Name[i] + Data[i] + Time[i]);
// alert(result[i]);
}
})
//console.log(typeof PageMethods.GetSingleValue);
// PageMethods.GetSingleValue();
setInterval("PageMethods.GetSingleValue()", 5000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
//type: 'datetime',
//tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
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: 'Test Data',
data: [[10, 50], [15, 55]]
}]
});
});
});
</script>
警惕（“宾果”）；
$（函数（）{
$（文档）.ready（函数（）{
Highcharts.setOptions({
全球：{
useUTC:false
}
});
var图；
图表=新的高点图表。图表({
图表：{
renderTo:“ltrChart”，
类型：“样条线”，
marginRight:10，
活动：{
加载：函数（）{
PageMethods.GetSingleValue（函数（结果）{
var Name=新数组（）；
var Type=新数组（）；
var Data=新数组（）；
var Time=新数组（）；
var-Ser=chart.series；
对于（变量i=0；i<6；i++）{
类型[i]=结果[i]。拆分（'-'）[0]；
名称[i]=结果[i]。拆分（'-'）[1]；
数据[i]=结果[i]。拆分（'-'）[2]；
时间[i]=结果[i]。拆分（'-'）[3]；
addSeries（{name:name[i]，data:[[Time[i]，data[i]]]}，true，true）；
/*确保数据获取的测试方法*/
//警报（类型[i]+名称[i]+数据[i]+时间[i]）；
//警报（结果[i]）；
}
})
//log（PageMethods.GetSingleValue的类型）；
//PageMethods.GetSingleValue（）；
setInterval（“PageMethods.GetSingleValue（）”，5000）；
}
}
},
标题：{
文本：“实时随机数据”
},
xAxis：{
//键入：“日期时间”，
//像素间隔：150
},
亚克斯：{
标题：{
文本：“值”
},
绘图线：[{
值：0，
宽度：1，
颜色：'#808080'
}]
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
Highcharts.dateFormat（“%Y-%m-%d%H:%m:%S'，this.x）+'
'+
数字格式（this.y，2）；
}
},
图例：{
已启用：false
},
出口：{
已启用：false
},
系列：[{
名称：'测试数据'，
数据：[[10,50]，[15,55]]
}]
});
});
});
Highcharts chart = new Highcharts("livechart")
.InitChart(new Chart
{
Events = new ChartEvents { Load = "ChartEventsLoad" }
})
.SetSeries(initialSeries)
.SetXAxis(new XAxis { Categories = lsst.ToArray() })
.AddJavascripVariable("iterated", iterateData.ToString())
.AddJavascripVariable("index", "5")
.AddJavascripFunction("ChartEventsLoad",
@"// set up the updating of the chart each 5 seconds
var result = iterated;
var theseries = eval(result); // De-serializing the JSON object
var loopseries = function() {
var sseries = livechart.series[0]
,shift = sseries.data.length > 5; // shift if the series is longer than 5;
sseries.addPoint(theseries[0].data[index], true, shift);
var sseries1 = livechart.series[1]
sseries1.addPoint(theseries[1].data[index], true, shift);
index++; };
setInterval(loopseries, 5000);")