Highstock不同时间值区间
Highstock different time value interval
我有一个 return 图表列表的网络服务。这是我的 class 图的结构:
public class Point
{
public string Date { get; set; }
public float Value { get; set; }
}
public class Serie
{
public string Port { get; set; }
public string Name { get; set; }
public string Unit { get; set; }
public List<Point> Data { get; set; }
}
public class Chart
{
public string Unit { get; set; }
public List<Serie> Series { get; set; }
}
public List<Chart> charts;
我在 js 脚本中使用 HighStock 来显示图表列表中的所有图表。
我想按单位对我的系列进行分组,并为每个单位创建一个新的 yAxis 以显示相同的单位系列(见下图)。
这是 js 文件中的代码:
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService.asmx/Channels",
data: "{}",
dataType: "json",
success: function (Charts) {
document.getElementById("debug").innerHTML = Charts.d;
Charts = Charts.d;
var margin = 40,
top = 100,
height = 160,
count = 0;
// Generals options for chart
var options = {
credits: { enabled: false },
chart: {
renderTo: chart,
zoomType: 'x',
alignTicks: false
},
legend: {
enabled: true
},
title: {
text: 'Values'
},
tooltip: {
valueDecimals: 2,
shared: true
},
xAxis: {
ordinal: false
},
yAxis: [],
series: []
};
// Go through Charts
for (var i in Charts) {
// Infos for the yAxis of the serie
// -------------------
options.yAxis.push({
title: {
text: "[" + Charts[i].Unit + "]"
},
labels: {
x: 30,
y: 4,
align: "right",
format: '{value} ' + Charts[i].Unit
},
offset: 0,
top: top,
height: height,
opposite: true
});
// Go through Series in a Charts
for (var j in Charts[i].Series) {
// Infos for the serie
// -------------------
var data = [];
// Go through Data in Series of a Charts
for (var k in Charts[i].Series[j].Data) {
var point = new Array(new Date(Charts[i].Series[j].Data[k].Date).getTime(), Charts[i].Series[j].Data[k].Value);
data.push(point);
}// End: Go through Data in Series of a Charts
count = Number(i);
// Add a serie and these attributes
options.series.push({
name: Charts[i].Series[j].Name,
data: data,
tooltip: {
valueSuffix: ' ' + Charts[i].Series[j].Unit,
valueDecimals: 3
},
yAxis: count
});
}// End: Go through Series in a Charts
count++;
top += height + margin;
}// End: Go through Charts
options.chart.height = top + 190;
Highcharts.StockChart(options);
},
error: function (xhr, thrownError) {
//alert("Error : " + xhr.status + "\nMessage : \n" + xhr.responseText);
document.getElementById("debug").innerHTML = "Error : " + xhr.status + "\nMessage : \n" + xhr.responseText;
}
});
});
</script>
如果我运行代码:
我的错误是:
Uncaught TypeError: Cannot read property 'clientX' of undefined -> highstock.js:177
还有(有时)这个错误:
Uncaught TypeError: Cannot read property 'info' of undefined -> highstock.js:342 (not sur about the #line)
如果我删除具有不同间隔的系列或者如果取消选择 Vbatt 系列(具有不同间隔的系列)它有效:
我花了很多时间在 Internet 和 Whosebug 上寻找解决我问题的问题,但是...什么都没有...
编辑:
-> 我们可以在同一张图表上绘制的最大序列是多少?
-> 我们可以在同一张图表上绘制的最大点是多少?
提前感谢您的反馈。
此致,
史蒂夫
问题已解决!
问题是我的网络服务发送的纪元数据以秒为单位,而 HighStock 需要以毫秒为单位。
问题已解决!
问题是我的网络服务发送的纪元数据以秒为单位,而 HighStock 需要以毫秒为单位。
我有一个 return 图表列表的网络服务。这是我的 class 图的结构:
public class Point
{
public string Date { get; set; }
public float Value { get; set; }
}
public class Serie
{
public string Port { get; set; }
public string Name { get; set; }
public string Unit { get; set; }
public List<Point> Data { get; set; }
}
public class Chart
{
public string Unit { get; set; }
public List<Serie> Series { get; set; }
}
public List<Chart> charts;
我在 js 脚本中使用 HighStock 来显示图表列表中的所有图表。 我想按单位对我的系列进行分组,并为每个单位创建一个新的 yAxis 以显示相同的单位系列(见下图)。
这是 js 文件中的代码:
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService.asmx/Channels",
data: "{}",
dataType: "json",
success: function (Charts) {
document.getElementById("debug").innerHTML = Charts.d;
Charts = Charts.d;
var margin = 40,
top = 100,
height = 160,
count = 0;
// Generals options for chart
var options = {
credits: { enabled: false },
chart: {
renderTo: chart,
zoomType: 'x',
alignTicks: false
},
legend: {
enabled: true
},
title: {
text: 'Values'
},
tooltip: {
valueDecimals: 2,
shared: true
},
xAxis: {
ordinal: false
},
yAxis: [],
series: []
};
// Go through Charts
for (var i in Charts) {
// Infos for the yAxis of the serie
// -------------------
options.yAxis.push({
title: {
text: "[" + Charts[i].Unit + "]"
},
labels: {
x: 30,
y: 4,
align: "right",
format: '{value} ' + Charts[i].Unit
},
offset: 0,
top: top,
height: height,
opposite: true
});
// Go through Series in a Charts
for (var j in Charts[i].Series) {
// Infos for the serie
// -------------------
var data = [];
// Go through Data in Series of a Charts
for (var k in Charts[i].Series[j].Data) {
var point = new Array(new Date(Charts[i].Series[j].Data[k].Date).getTime(), Charts[i].Series[j].Data[k].Value);
data.push(point);
}// End: Go through Data in Series of a Charts
count = Number(i);
// Add a serie and these attributes
options.series.push({
name: Charts[i].Series[j].Name,
data: data,
tooltip: {
valueSuffix: ' ' + Charts[i].Series[j].Unit,
valueDecimals: 3
},
yAxis: count
});
}// End: Go through Series in a Charts
count++;
top += height + margin;
}// End: Go through Charts
options.chart.height = top + 190;
Highcharts.StockChart(options);
},
error: function (xhr, thrownError) {
//alert("Error : " + xhr.status + "\nMessage : \n" + xhr.responseText);
document.getElementById("debug").innerHTML = "Error : " + xhr.status + "\nMessage : \n" + xhr.responseText;
}
});
});
</script>
如果我运行代码:
我的错误是:
Uncaught TypeError: Cannot read property 'clientX' of undefined -> highstock.js:177
还有(有时)这个错误:
Uncaught TypeError: Cannot read property 'info' of undefined -> highstock.js:342 (not sur about the #line)
如果我删除具有不同间隔的系列或者如果取消选择 Vbatt 系列(具有不同间隔的系列)它有效:
我花了很多时间在 Internet 和 Whosebug 上寻找解决我问题的问题,但是...什么都没有...
编辑:
-> 我们可以在同一张图表上绘制的最大序列是多少?
-> 我们可以在同一张图表上绘制的最大点是多少?
提前感谢您的反馈。
此致,
史蒂夫
问题已解决!
问题是我的网络服务发送的纪元数据以秒为单位,而 HighStock 需要以毫秒为单位。
问题已解决!
问题是我的网络服务发送的纪元数据以秒为单位,而 HighStock 需要以毫秒为单位。