Javascript 使用highchart的实时多系列
我正在尝试在海图上同时显示10个系列。使用以下代码Javascript 使用highchart的实时多系列,javascript,highcharts,Javascript,Highcharts,我正在尝试在海图上同时显示10个系列。使用以下代码 function requestData() { $.ajax({ url: 'Default3.aspx', dataType: 'json', error: function (point) { var series = chart.series[10], shift = series.data.length > 50;
function requestData() {
$.ajax({
url: 'Default3.aspx',
dataType: 'json',
error: function (point) {
var series = chart.series[10],
shift = series.data.length > 50; // shift if the series is longer than 20
chart.series[0].addPoint([0, 1], true, true);
chart.series[1].addPoint([0, 2], true, true);
chart.series[2].addPoint([0, 3], true, true);
chart.series[3].addPoint([0, 4], true, true);
chart.series[4].addPoint([0, 5], true, true);
chart.series[5].addPoint([0, 6], true, true);
chart.series[6].addPoint([0, 7], true, true);
chart.series[7].addPoint([0, 8], true, true);
chart.series[8].addPoint([0, 9], true, true);
chart.series[9].addPoint([0, 10], true, true);
// call it again after one second
setTimeout(requestData, 5000);
},
success: function (point) {
var series = chart.series[10],
shift = series.data.length > 50; // shift if the series is longer than 20
// add the point
// chart.series[0].addPoint(eval(point), true, shift);
chart.series[0].addPoint([0, 1], true, true);
chart.series[1].addPoint([0, 2], true, true);
chart.series[2].addPoint([0, 3], true, true);
chart.series[3].addPoint([0, 4], true, true);
chart.series[4].addPoint([0, 5], true, true);
chart.series[5].addPoint([0, 6], true, true);
chart.series[6].addPoint([0, 7], true, true);
chart.series[7].addPoint([0, 8], true, true);
chart.series[8].addPoint([0, 9], true, true);
chart.series[9].addPoint([0, 10], true, true);
// call it again after one second
setTimeout(requestData, 5000);
},
cache: false
});
}
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
events: {
load: requestData
}
},
title: {
text: 'Sensor Data Vs. Time'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
data: []
},{
data: []
}, {
data: []
}, {
data: []
}, {
data: []
}, {
data: []
}, {
data: []
}, {
data: []
}, {
data: []
}, {
data: []
}]
});
});
图表上显示了该系列的图例,但未显示数据。我建议将其替换为:
chart.series[0].addPoint([0, 1], true, true);
//other points as first
chart.series[9].addPoint([0, 10], true, true);
与
不能动态地将点添加到空图表中,但可以对数据设置空值(如此处所示)或使用addSeries 我在反复试验的基础上做了一些修改,并使其正常工作,实际上我必须使用以前没有使用的eval函数。 这是答案 JavaScript 服务器端代码C aspx代码
你收到错误了吗?你能给我们发一个链接到你的图表的现场演示吗?你能准备现场演示吗?是的。它工作得非常好。但是现在我正在与我提到的测量仪进行斗争,请复制为现场示例。我的答案代表数据库中的多个现场系列,我还应该在这里复制什么?
chart.series[0].addPoint([0, 1], false, true);
//other points as first
chart.series[9].addPoint([0, 10], true, true);
function requestData() {
$.ajax({
url: 'Default3.aspx',
dataType: 'json',
error: function (point) {
var series = chart.series[0],
shift = series.data.length > 50; // shift if the series is longer than 20
var values = eval(point);
chart.series[0].addPoint([values[0], values[1]], true, shift);
chart.series[1].addPoint([values[0], values[2]], true, shift);
chart.series[2].addPoint([values[0], values[3]], true, shift);
chart.series[3].addPoint([values[0], values[4]], true, shift);
chart.series[4].addPoint([values[0], values[5]], true, shift);
chart.series[5].addPoint([values[0], values[6]], true, shift);
chart.series[6].addPoint([values[0], values[7]], true, shift);
chart.series[7].addPoint([values[0], values[8]], true, shift);
chart.series[8].addPoint([values[0], values[9]], true, shift);
chart.series[9].addPoint([values[0], values[10]], true, shift);
// call it again after defined seconds
setTimeout(requestData, 5000);
},
success: function (point) {
var series = chart.series[0],
shift = series.data.length > 50; // shift if the series is longer than 20
// add the point
// chart.series[0].addPoint(eval(point), true, shift);
var values = eval(point);
chart.series[0].addPoint([values[0], values[1]], true, shift);
chart.series[1].addPoint([values[0], values[2]], true, shift);
chart.series[2].addPoint([values[0], values[3]], true, shift);
chart.series[3].addPoint([values[0], values[4]], true, shift);
chart.series[4].addPoint([values[0], values[5]], true, shift);
chart.series[5].addPoint([values[0], values[6]], true, shift);
chart.series[6].addPoint([values[0], values[7]], true, shift);
chart.series[7].addPoint([values[0], values[8]], true, shift);
chart.series[8].addPoint([values[0], values[9]], true, shift);
chart.series[9].addPoint([values[0], values[10]], true, shift);
// call it again after defined seconds
setTimeout(requestData, 5000);
},
cache: false
});
}
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Sensor Data Vs. Time'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Pressure 1 (PSI)',
data: []
}, {
name: 'Flow 1 (GPM)',
data: []
}, {
name:'Temperature 1 (C)',
data: []
}, {
name: 'Speed 1 (RPM)',
data: []
}, {
name: 'Power 1 (kW)',
data: []
}, {
name:'Pressure 2 (PSI)',
data: []
}, {
name:'Flow 2 (GPM)',
data: []
}, {
name:'Temperature 2 (C)',
data: []
}, {
name: 'Speed 2 (RPM)',
data: []
}, {
name: 'Power 2 (kW)',
data: []
}]
});
});
public partial class Default3 : System.Web.UI.Page
{
public DataTable dt = new DataTable();
public string DATA;
List<string> hidXCategories11 = new List<string>();
public string chartData
{
get;
set;
}
protected void Page_Load(object sender, EventArgs e)
{
GetData();
var epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
var timeDiff = DateTime.Now - new DateTime(1970, 1, 1);
var totaltime = timeDiff.TotalMilliseconds;
List<double> _data = new List<double>();
foreach (DataRow row in dt.Rows)
{
_data.Add(totaltime);
_data.Add((double)Convert.ToDouble(row["S11"]));
_data.Add((double)Convert.ToDouble(row["S12"]));
_data.Add((double)Convert.ToDouble(row["S13"]));
_data.Add((double)Convert.ToDouble(row["S14"]));
_data.Add((double)Convert.ToDouble(row["S15"]));
_data.Add((double)Convert.ToDouble(row["S21"]));
_data.Add((double)Convert.ToDouble(row["S22"]));
_data.Add((double)Convert.ToDouble(row["S23"]));
_data.Add((double)Convert.ToDouble(row["S24"]));
_data.Add((double)Convert.ToDouble(row["S25"]));
}
JavaScriptSerializer jss = new JavaScriptSerializer();
chartData = jss.Serialize(_data);
Response.Write(chartData);
}
private void GetData()
{
StringBuilder str = new StringBuilder();
SqlConnection con = new SqlConnection("Data Source=localhost\\SQLEXPRESS;Initial Catalog=MyData;Integrated Security=SSPI");
SqlDataAdapter adp = new SqlDataAdapter("select top 1 * from MyTable order by Id desc ", con);
adp.Fill(dt);
}
}
<script src="JavaScript/highcharts.js"></script>
<script src="JavaScript/exporting.js"></script>
<div id="container" style="min-width: 280px; height: 400px; margin: 0 auto"></div>