想要获取单个系列数据之间的差异，并将其显示在图表的高位/高位上 [英] Want to take difference between single series data and show them on chart in highcharts/highstock
本文介绍了想要获取单个系列数据之间的差异，并将其显示在图表的高位/高位上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在处理asp.net MVC 5
引用我的问题，我想在每个两点之间加以区别，比如 2-1 3-2 4-3 5-4 等等把它们放入我的系列数据图表中bellow是我的控制器代码b
$ b
<$ c $从ADS_Device_Data中选择Device_ID，Energy_kWh，Power_kW，Voltage_Phase_1，Data_Datetime，Voltage_Phase_2，Voltage_Phase_3，Current_Phase_1，Current_Phase_2，Current_Phase_3，其中Device_Serial_Number = @serial_number AND Data_Datetime between'+ time.ToString（format）+'AND'+ time2.ToString（format）+'，con）;
Device_Id_command.Parameters.AddWithValue（@ serial_number，serial_number）;
con.Open（）;
SqlDataReader reader = Device_Id_command.ExecuteReader（）;
// SqlDataReader reader_events = event_command.ExecuteReader（）; （reader.Read（））
{
energy_kwh.Add（Convert.ToDouble（reader [Energy_kWh]））;
while
power_kw.Add（Convert.ToDouble（reader [Power_kW]））;
voltage_1.Add（Convert.ToDouble（reader [Voltage_Phase_1]））;
voltage_2.Add（Convert.ToDouble（reader [Voltage_Phase_2]））;
voltage_3.Add（Convert.ToDouble（reader [Voltage_Phase_3]））;
current_1.Add（Convert.ToDouble（reader [Current_Phase_1]））;
current_2.Add（Convert.ToDouble（reader [Current_Phase_2]））;
current_3.Add（Convert.ToDouble（reader [Current_Phase_3]））;
Meter_datetime.Add（sample_con.ConvertToUnixTimestamp（Convert.ToDateTime（reader [Data_Datetime]）））;
device_id = Convert.ToInt32（reader [Device_ID]）;
}
con.Close（）;
之后，我将所有来自reader的数据放入 ViewData
ViewData [energy_kwh] = energy_kwh;
ViewData [Meter_datetime] = Meter_datetime;
ViewData [power_kw] = power_kw;
ViewData [voltage_1] = voltage_1;
ViewData [voltage_2] = voltage_2;
ViewData [voltage_3] = voltage_3;
ViewData [current_1] = current_1;
ViewData [current_2] = current_2;
ViewData [current_3] = current_3;
在我的剃须刀中，我完成了以下工作：
// ****************数据排列来自控制器*************
var myArrayX_kwh = [];
var myArrayY_kwh = [];
var myArrayY_power = [];
var myArrayY_voltage_1 = [];
var myArrayY_voltage_2 = [];
var myArrayY_voltage_3 = [];
var myArrayY_current_1 = [];
var myArrayY_current_2 = [];
var myArrayY_current_3 = [];
// var myArrayY_getData = [];
var arry_kwh = [];
var arry_power = [];
var arry_voltage_1 = [];
var arry_voltage_2 = [];
var arry_voltage_3 = [];
var arry_current_1 = [];
var arry_current_2 = [];
var arry_current_3 = [];
之后，我添加了2个循环，它们将 x 和 y 轴
@foreach（var st在ViewData [Meter_datetime]中显示为< double？>）
{
@：myArrayX_kwh.push（@st）;
}
@foreach（var in ViewData [energy_kwh] as List< double？>）
{
@：myArrayY_kwh.push（@st ）;
}
@foreach（var in ViewData [power_kw] as List< double？>）
{
@：myArrayY_power.push（@st ）;
$ b @foreach（ViewData中的var st [voltage_1]为List< double？>）
{
@：myArrayY_voltage_1.push（@st ）;
}
$ b $ @foreach（ViewData中的var st [voltage_2]为List< double？>）
{
@：myArrayY_voltage_2.push（@st ）;
$ b @foreach（ViewData中的var st [voltage_3]为List< double？>）
{
@：myArrayY_voltage_3.push（@st ）;
$ b @foreach（ViewData中的var st [current_1]列表为< double？>）
{
@：myArrayY_current_1.push（@st ）;
}
$ b $ @foreach（ViewData中的var st [current_2]列表为< double？>）
{
@：myArrayY_current_2.push（@st ）;
}
$ b $ @foreach（var中的ViewStream [current_3]为List< double？>）
{
@：myArrayY_current_3.push（@st ）; （i = 0; i
}一世]， }）;
arry_power.push（{x：myArrayX_kwh [i]，y：myArrayY_power [i]，}）;
arry_voltage_1.push（{x：myArrayX_kwh [i]，y：myArrayY_voltage_1 [i]，}）;
arry_voltage_2.push（{x：myArrayX_kwh [i]，y：myArrayY_voltage_2 [i]，}）;
arry_voltage_3.push（{x：myArrayX_kwh [i]，y：myArrayY_voltage_3 [i]，}）;
arry_current_1.push（{x：myArrayX_kwh [i]，y：myArrayY_current_1 [i]，}）;
arry_current_2.push（{x：myArrayX_kwh [i]，y：myArrayY_current_2 [i]，}）;
arry_current_3.push（{x：myArrayX_kwh [i]，y：myArrayY_current_3 [i]，}）;
//getData.push（{y：myArrayY_getData [i]}）;
}
之后，我已初始化我的图表
var chart1 = new Highcharts.Chart（{
图表：{
renderTo：'container1'，
type ：'column'，
zoomType：'xy'，
panning：true，
panKey：'shift'，
// type：'column'，
/ / zoomType：'xy'，
// panning：true，
// pankey：'shift'，
resetZoomButton：{
position：{
// align ：'right'，//默认
// verticalAlign：'top'，//默认
x：-10，
y：350，
// height：25
}，
relativeTo：'图表'
}
}，
滚动条：{
已启用：true
}，
navigator：{
// xAxis：{
// tickWidth：0，
// lineWidth：0，
// gridLineWidth：1，
// tickPixelInterval：200，
//标签：{
// align：'left'，
//风格：{
//颜色：'＃ 888'
//}，
// x：3，
// y：-4
//}
//}，
/ / yAxis：{
// gridLineWidth：0，
// startOnTick：false，
// endOnTick：false，
// minPadding：0.1，
// maxPadding：0.1，
//标签：{
//启用：false
//}，
//标题：{
// text：null
//}，
// tickWidth：0
//}，
//系列：{
// //数据：arry_kwh_2，
//类型：'列'，
//颜色：'＃4572A7'，
// fillOpacity：0.05，
// dataGrouping：{
//平滑：true
//}，
//线宽：1，
// marker：{
//启用：true
//}
//}，
启用：true，
height：30，
$ b $，
rangeSelector：{
buttonTheme：{//按钮的样式
fill：'none' ，
stroke：'none'，
'stroke-width'：0，
r：8，
style：{
color：'＃039'，
fontWeight：'bold'
}，
sta tes：{
hover：{
}，
select：{
fill：'＃039'，
style：{
color：'white'
$ b $ true $ b $ inputBoxWidth 160 $ b $ inputStyle {
color：'＃039'，
fontWeight：'bold'
}，
labelStyle：{
color：'black'，
fontWeight：'bold'
}，
按钮：[{
type：'minute'，
count：60 * 6，
text：'6h'
}，{
类型：'day'，
count：1，
text：'1d'
}，{
键入：'day'，
count：7，
text：'7d'
}，
{
类型：'day'，
count： 14，
text：'2w'
}，
{
类型：'day'，
count：21，
text：'3w'
，
{
类型：'月'，
计数：1，
文本：'1m'
}，
{
type：'all'，
text：'All'
}]
}，
plotOptions：{
column： {
turboThreshold：500000
}
}，
标题：{
text：'Energy vs Date&时间'，
风格：{
fontWeight：'bold'，
}
}，
xAxis：{
类型：'datetime'，
//分钟：0，
//最大值：100000
}，
yAxis：
{
滚动条：{
启用：true，
showFull：false
}，
alternateGridColor：'＃FDFFD5'，
标题：{
text：'Energy（kWh）'，
style：{
// color：'＃FF00FF'，
fontSize：'12px'，
// sfont：'bold 200px Verdana，sans-serif'，
}
}
}，
series：
[
{
名称：'能源千瓦时'，
颜色：'绿色'，
data：arry_kwh，
}
]，
}）;
注意
我正在查看4张不同的图表查看
我只希望对 arry_kwh 不同，而不是所有图表
更新
在添加了这段代码之后，我将这个数组的值放入了一个单独的系列
var arry_kwh_diff = [];
for（var j = 0; j
它不会显示我正确的值，也没有样条线。
改变后
var arry_kwh_diff = []; （var j = 0; j
任何帮助将不胜感激
解决方案在添加到高层图之前，您可以准备好您的数据。例如，做这样的事情：
var arry_kwh = [{x：Date.now（），y：100}，
{x：Date.now（）+ 1000，y：120}，
{x：Date.now（）+ 2000，y：140}，
{x：Date.now （）+ 3000，y：165}];
var arry_kwh_diff = [];
var i = 0;
for（; i< arry_kwh.length - 1; i ++）{
arry_kwh_diff [i] = {x：arry_kwh [i] .x，y：arry_kwh [i + 1] .y - arry_kwh [I] .Y};
}
arry_kwh_diff [i] = {x：arry_kwh [i] .x，y：arry_kwh [i] .y};
然后使用 arry_kwh_diff 来绘制差异。
小提琴演示可以在这里找到：
http://jsfiddle.net/8fjyLhy1/1/
I am working on asp.net MVC 5
Referring to my question i want to take difference between each two points like this 2-1 3-2 4-3 5-4 and so on and then put them into my series data in chart
Bellow is my controller code
//Getting data from DB to view in charts
SqlCommand Device_Id_command = new SqlCommand("Select Device_ID, Energy_kWh,Power_kW,Voltage_Phase_1,Data_Datetime,Voltage_Phase_2,Voltage_Phase_3,Current_Phase_1,Current_Phase_2,Current_Phase_3 from [ADS_Device_Data] where Device_Serial_Number=@serial_number AND Data_Datetime between'" + time.ToString(format) + "'AND'" + time2.ToString(format) + "'", con);
Device_Id_command.Parameters.AddWithValue("@serial_number", serial_number);
con.Open();
SqlDataReader reader = Device_Id_command.ExecuteReader();
//SqlDataReader reader_events = event_command.ExecuteReader();
while (reader.Read())
{
energy_kwh.Add(Convert.ToDouble(reader["Energy_kWh"]));
power_kw.Add(Convert.ToDouble(reader["Power_kW"]));
voltage_1.Add(Convert.ToDouble(reader["Voltage_Phase_1"]));
voltage_2.Add(Convert.ToDouble(reader["Voltage_Phase_2"]));
voltage_3.Add(Convert.ToDouble(reader["Voltage_Phase_3"]));
current_1.Add(Convert.ToDouble(reader["Current_Phase_1"]));
current_2.Add(Convert.ToDouble(reader["Current_Phase_2"]));
current_3.Add(Convert.ToDouble(reader["Current_Phase_3"]));
Meter_datetime.Add(sample_con.ConvertToUnixTimestamp(Convert.ToDateTime(reader["Data_Datetime"])));
device_id = Convert.ToInt32(reader["Device_ID"]);
}
con.Close();
After that i have put all the data coming from reader into ViewData
ViewData["energy_kwh"] = energy_kwh;
ViewData["Meter_datetime"] = Meter_datetime;
ViewData["power_kw"] = power_kw;
ViewData["voltage_1"] = voltage_1;
ViewData["voltage_2"] = voltage_2;
ViewData["voltage_3"] = voltage_3;
ViewData["current_1"] = current_1;
ViewData["current_2"] = current_2;
ViewData["current_3"] = current_3;
In my razor i have done the following
// **************** Data arranging coming from controller *************
var myArrayX_kwh = [];
var myArrayY_kwh = [];
var myArrayY_power = [];
var myArrayY_voltage_1 = [];
var myArrayY_voltage_2 = [];
var myArrayY_voltage_3 = [];
var myArrayY_current_1 = [];
var myArrayY_current_2 = [];
var myArrayY_current_3 = [];
//var myArrayY_getData = [];
var arry_kwh = [];
var arry_power = [];
var arry_voltage_1 = [];
var arry_voltage_2 = [];
var arry_voltage_3 = [];
var arry_current_1 = [];
var arry_current_2 = [];
var arry_current_3 = [];
After that i have added 2 loops which push the values of x and y axis
@foreach (var st in ViewData["Meter_datetime"] as List<double?>)
{
@:myArrayX_kwh.push(@st);
}
@foreach (var st in ViewData["energy_kwh"] as List<double?>)
{
@:myArrayY_kwh.push(@st);
}
@foreach (var st in ViewData["power_kw"] as List<double?>)
{
@:myArrayY_power.push(@st);
}
@foreach (var st in ViewData["voltage_1"] as List<double?>)
{
@:myArrayY_voltage_1.push(@st);
}
@foreach (var st in ViewData["voltage_2"] as List<double?>)
{
@:myArrayY_voltage_2.push(@st);
}
@foreach (var st in ViewData["voltage_3"] as List<double?>)
{
@:myArrayY_voltage_3.push(@st);
}
@foreach (var st in ViewData["current_1"] as List<double?>)
{
@:myArrayY_current_1.push(@st);
}
@foreach (var st in ViewData["current_2"] as List<double?>)
{
@:myArrayY_current_2.push(@st);
}
@foreach (var st in ViewData["current_3"] as List<double?>)
{
@:myArrayY_current_3.push(@st);
}
for (var i = 0; i < myArrayX_kwh.length; i++) {
arry_kwh.push({ x: myArrayX_kwh[i], y: myArrayY_kwh[i], });
arry_power.push({ x: myArrayX_kwh[i], y: myArrayY_power[i], });
arry_voltage_1.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_1[i], });
arry_voltage_2.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_2[i], });
arry_voltage_3.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_3[i], });
arry_current_1.push({ x: myArrayX_kwh[i], y: myArrayY_current_1[i], });
arry_current_2.push({ x: myArrayX_kwh[i], y: myArrayY_current_2[i], });
arry_current_3.push({ x: myArrayX_kwh[i], y: myArrayY_current_3[i], });
//getData.push({y: myArrayY_getData[i] });
}
After that i have initialized my chart
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
zoomType: 'xy',
panning: true,
panKey: 'shift',
//type: 'column',
//zoomType: 'xy',
//panning: true,
//pankey: 'shift',
resetZoomButton: {
position: {
//align: 'right', // by default
//verticalAlign: 'top', // by default
x: -10,
y: 350,
//height: 25
},
relativeTo: 'chart'
}
},
scrollbar:{
enabled: true
},
navigator: {
//xAxis: {
// tickWidth: 0,
// lineWidth: 0,
// gridLineWidth: 1,
// tickPixelInterval: 200,
// labels: {
// align: 'left',
// style: {
// color: '#888'
// },
// x: 3,
// y: -4
// }
//},
//yAxis: {
// gridLineWidth: 0,
// startOnTick: false,
// endOnTick: false,
// minPadding: 0.1,
// maxPadding: 0.1,
// labels: {
// enabled: false
// },
// title: {
// text: null
// },
// tickWidth: 0
//},
//series: {
// //data: arry_kwh_2,
// type: 'column',
// color: '#4572A7',
// fillOpacity: 0.05,
// dataGrouping: {
// smoothed: true
// },
// lineWidth: 1,
// marker: {
// enabled: true
// }
//},
enabled: true,
height: 30,
},
rangeSelector: {
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 8,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}
}
},
enabled: true,
inputBoxWidth: 160,
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'black',
fontWeight: 'bold'
},
buttons: [{
type: 'minute',
count: 60 * 6,
text: '6h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 7,
text: '7d'
},
{
type: 'day',
count: 14,
text: '2w'
},
{
type: 'day',
count: 21,
text: '3w'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'all',
text: 'All'
}]
},
plotOptions: {
column: {
turboThreshold: 500000
}
},
title: {
text: 'Energy vs Date & Time',
style: {
fontWeight: 'bold',
}
},
xAxis: {
type: 'datetime',
//min: 0,
//max: 100000
},
yAxis:
{
scrollbar: {
enabled: true,
showFull: false
},
alternateGridColor: '#FDFFD5',
title: {
text: 'Energy (kWh)',
style: {
//color: '#FF00FF',
fontSize: '12px',
//sfont: 'bold 200px Verdana, sans-serif',
}
}
},
series:
[
{
name: 'Energy kWh',
color: 'green',
data: arry_kwh,
}
],
});
Note
I am viewing 4 different charts in my single view
I only want to take difference for arry_kwh only not for all charts
Update
I have added this piece of code after that i have put this value of array into a separate series
var arry_kwh_diff = [];
for (var j = 0; j < arry_kwh.length - 1; j++)
{
arry_kwh_diff[j] = { x: arry_kwh.x, y: arry_kwh[j + 1].y - arry_kwh[j].y };
}
arry_kwh_diff[j] = { x: arry_kwh.x, y: arry_kwh.y };
Adding the array in my chart code
series:
[
{
name: 'Energy kWh',
color: 'green',
data: arry_kwh,
},
{
type: 'spline',
name: 'Difference',
data: arry_kwh_diff
}
],
It's showing me bellow image
It's not showing me correct values also no spline is there
After changing
var arry_kwh_diff = [];
for (var j = 0; j < arry_kwh.length - 1; j++)
{
arry_kwh_diff.push({ x: arry_kwh[j].x, y: arry_kwh[j + 1].y - arry_kwh[j].y });
}
arry_kwh_diff[j] = { x: arry_kwh[j].x, y: arry_kwh[j].y };
Now it's showing me an empty view
Any help would be highly appreciated
解决方案 You could prepare your data, before adding it to highcharts. For instance, do something like this:
var arry_kwh = [ {x: Date.now(), y: 100},
{x: Date.now()+1000, y: 120 },
{x: Date.now()+2000, y: 140 },
{x: Date.now()+3000, y: 165 }];
var arry_kwh_diff = [];
var i=0;
for(; i < arry_kwh.length - 1; i++) {
arry_kwh_diff[i] = {x: arry_kwh[i].x, y:arry_kwh[i+1].y - arry_kwh[i].y};
}
arry_kwh_diff[i] = {x: arry_kwh[i].x, y:arry_kwh[i].y};
And then use arry_kwh_diff to graph the difference.
A fiddle demo can be found here:
http://jsfiddle.net/8fjyLhy1/1/
这篇关于想要获取单个系列数据之间的差异，并将其显示在图表的高位/高位上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
