想要获取单个系列数据之间的差异并将它们显示在 highcharts/highstock 的图表上 [英] Want to take difference between single series data and show them on chart in highcharts/highstock
本文介绍了想要获取单个系列数据之间的差异并将它们显示在 highcharts/highstock 的图表上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在研究 asp.net MVC 5参考我的问题，我想在每两个点之间进行区分 2-1 3-2 4-3 5-4 等等然后把它们放到我的图表系列数据中
下面是我的控制器代码
//从DB获取数据以图表方式查看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@format_Device_Serial_Number(AND) +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"]));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"]);}关闭()；之后，我将来自阅读器的所有数据放入 ViewData
ViewData["energy_kwh"] = energy_kwh;ViewData["Meter_datetime"] = Meter_datetime;ViewData["power_kw"] = power_kw;ViewData["电压_1"] = 电压_1;ViewData["电压_2"] = 电压_2;ViewData["电压_3"] = 电压_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 in ViewData["Meter_datetime"] 作为 List){@:myArrayX_kwh.push(@st);}@foreach (var st in ViewData["energy_kwh"] as List){@:myArrayY_kwh.push(@st);}@foreach (var st in ViewData["power_kw"] 作为 List){@:myArrayY_power.push(@st);}@foreach (var st in ViewData["voltage_1"] as List){@:myArrayY_voltage_1.push(@st);}@foreach (var st in ViewData["voltage_2"] as List){@:myArrayY_voltage_2.push(@st);}@foreach (var st in ViewData["voltage_3"] 作为 List){@:myArrayY_voltage_3.push(@st);}@foreach (var st in ViewData["current_1"] 作为 List<double?>){@:myArrayY_current_1.push(@st);}@foreach (var st in ViewData["current_2"] 作为 List){@:myArrayY_current_2.push(@st);}@foreach (var st in ViewData["current_3"] 作为 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] });} 之后我已经初始化了我的图表
var chart1 = new Highcharts.Chart({图表: {渲染到:'容器1'，类型:'列'，zoomType: 'xy',平移:真实，panKey: '移位',//类型:'列'，//缩放类型:'xy',//平移:真，//pankey: 'shift',重置缩放按钮:{位置: {//align: 'right',//默认情况下//verticalAlign: 'top',//默认情况下x:-10，y: 350,//高度:25},相对:'图表'}},滚动条:{启用:真},导航器:{//x轴:{//刻度宽度:0,//线宽:0,//网格线宽度: 1,//tickPixelInterval: 200,// 标签: {//对齐:'左'，// 风格: {//颜色:'#888'//},//x: 3,//y: -4//}//},//y轴:{//网格线宽度: 0,//startOnTick: 假，//endOnTick: 假，//minPadding: 0.1,//maxPadding: 0.1,// 标签: {//启用:假//},// 标题: {//文本:空//},//刻度宽度:0//},//系列: {////数据:arry_kwh_2，//类型:'列'，//颜色:'#4572A7'，//填充不透明度:0.05,//数据分组:{//平滑:真//},//线宽: 1,//标记:{//启用:真//}//},启用:真，身高:30，},范围选择器:{buttonTheme: {//按钮的样式填写:'无'，中风:'无'，'笔画宽度':0，r: 8,风格: {颜色: '#039',fontWeight: '粗体'},状态: {悬停:{},选择: {填充:'#039',风格: {白颜色'}}}},启用:真，输入框宽度:160，输入样式:{颜色: '#039',fontWeight: '粗体'},标签样式:{颜色:黑色'，fontWeight: '粗体'},纽扣: [{类型:'分钟'，计数:60 * 6，文字:'6h'}, {类型:'天'，计数:1，文字:'1d'}, {类型:'天'，数:7，文字:'7d'},{类型:'天'，数:14，文字:'2w'},{类型:'天'，计数:21，文字:'3w'},{类型:'月'，计数:1，文字:'1m'},{类型:'全部'，文字:'全部'}]},绘图选项:{柱子: {涡轮阈值:500000}},标题: {text: '能量 vs 日期 &时间'，风格: {fontWeight: '粗体',}},x轴:{类型:'日期时间'，//分钟:0，//最大:100000},y轴:{滚动条:{启用:真，显示完整:假},替代网格颜色:'#FDFFD5'，标题: {文本:'能源(千瓦时)'，风格: {//颜色: '#FF00FF',字体大小:'12px'，//sfont: 'bold 200px Verdana, sans-serif',}}},系列:[{name: '能源千瓦时',颜色:'绿色'，数据:arry_kwh，}],});注意我在单一视图中查看 4 个不同的图表
我只想对 arry_kwh 取不同，而不是对所有图表
更新
在将数组的这个值放入一个单独的系列之后，我添加了这段代码
var arry_kwh_diff = [];for (var j = 0; j 它没有向我显示正确的值，也没有样条线
改变后
var arry_kwh_diff = [];for (var j = 0; j 任何帮助将不胜感激
解决方案 您可以在将数据添加到 highcharts 之前准备数据.例如，做这样的事情:
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 = [];变量 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/
这篇关于想要获取单个系列数据之间的差异并将它们显示在 highcharts/highstock 的图表上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
