我正在使用asp.net MVC 5,我想以以下方式对数据进行示例
我将在短期内解释点号2,请看下面的图像以便于视觉理解。

红线是两点之间的区别(如点1中所写)。
图为energy_kwh
对于2点,以下面的示例为例
例如,3点的值为5、7、9,它们的绘制时间分别为3e 224时间范围可能e 1252PME 226E 1273 PM<代码>3 PM<代码>E 228和E 1294 PM4 PM<代码>E 230E 230,但如果我考虑到E 131>7-5=2<代码>E<232/代码>和E 1339-7=2<代码>E 234代码>代码i有代码代码>代码,但代码<><<><<>代码><><<>代码><<><<><>代码<><<>238<>代码>我想在时间范围内画出新的点,比如从下午2点到下午3点,点是2,所以它会在时间之间显示。
我知道如何计算两点之间的差额,但我无法在图表上画出它们,因为我不知道如何处理时间范围
贝娄是我的控制器代码
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();在那之后,我在我的ViewData中通过了它们
ViewData["energy_kwh"] = energy_kwh;贝娄是我的剃刀语法
var myArrayX_kwh = [];
var myArrayY_kwh = [];
var arry_kwh = [];
@foreach (var st in ViewData["energy_kwh"] as List<double?>)
{
@:myArrayY_kwh.push(@st);
}
for (var i = 0; i < myArrayX_kwh.length; i++)
{
arry_kwh.push({ x: myArrayX_kwh[i], y: myArrayY_kwh[i], });
}
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
zoomType: 'xy',
panning: true,
panKey: 'shift',
resetZoomButton: {
position: {
x: -10,
y: 350,
},
relativeTo: 'chart'
}
},
scrollbar:{
enabled: true
},
navigator: {
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: 50000
}
},
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: {
fontSize: '12px',
}
}
},
series:
[
{
name: 'Energy kWh',
color: 'green',
data: arry_kwh,
}
],
});任何帮助都将不胜感激。
发布于 2016-09-23 16:03:39
好的,对,所以计算比我的注释稍微复杂一些,因为我没有考虑到需要x值来构建当前的基值。
对于差异数组中的x值,真正需要的是当前x值,再加上当前和下一个x值之间的差额的一半。
所以这个:
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 + ((arry_kwh[i+1].x - arry_kwh[i].x) / 2),
y: (arry_kwh[i+1].y - arry_kwh[i].y)
};更新的小提琴:
https://stackoverflow.com/questions/39660378
复制相似问题