我使用highcharts在mvc dot net中创建了一个应用程序 我已将它们连接到数据库并在视图中显示它们 到现在为止，每件事情都很顺利
但现在我要做的是，如果更新数据库，图表将自动显示更新的数据。现在我必须刷新页面以查看更新的数据，它显示得很好，但我想要的只是不刷新它。
我搜索了很多文章，发现ajax轮询应该帮助我，所以在我的控制器代码中我传递了来自阅读器的ViewData中的所有数据
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"]);
}
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;
ViewData["x"] = x;
ViewData["events"] = events;
return View();
以上＆＃39; x＆＃39;只是屏幕宽度 在我看来，我已经创建了一个全局的getSVG方法，该方法将一组图表作为参数
$(function () { Highcharts.getSVG = function (charts) {
var svgArr = [],
top = 0,
width = 0;
$.each(charts, function(i, chart) {
var svg = chart.getSVG();
svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ' );
svg=svg.replace('</svg>', '</g>');
top += chart.chartHeight;
width = Math.max(width, chart.chartWidth);
svgArr.push(svg);
});
return '<svg height="'+ top +'" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};
并创建了一个全局导出Charts方法，该方法将一组图表作为参数，并将选项导出为第二个参数
Highcharts.exportCharts = function(charts, options) {
// Merge the options
options = Highcharts.merge(Highcharts.getOptions().exporting, options);
// Post to export server
Highcharts.post(options.url, {
filename: options.filename || 'chart',
type: options.type,
width: options.width,
svg: Highcharts.getSVG(charts)
});
};
之后我安排了来自控制器的数据，如此
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 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个for循环，它会像这样推送数组中的数据
@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], });
}
然后我初始化并编写了我的图表代码
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
zoomType: 'xy',
resetZoomButton: {
position: {
align: 'right', // by default
verticalAlign: 'top', // by default
x: -250,
y: 5,
//height: 25
},
relativeTo: 'chart'
}
},
title: {
text: 'Energy vs Date & Time',
style: {
//color: '#FF00FF',
fontWeight: 'bold',
//fontSize: '12px'
//sfont: 'bold 200px Verdana, sans-serif',
}
},
xAxis: {
// categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
type: 'datetime',
// max: new Date().getTime(),
//labels: {
// // format: {value:}
// style: {
// fontSize: '13px',
// fontFamily: 'Verdana, sans-serif'
// }
//}
}, yAxis: {
title: {
text: 'Energy (kWh)',
style: {
//color: '#FF00FF',
fontSize: '12px',
//sfont: 'bold 200px Verdana, sans-serif',
}
}
},
因为我正在显示4个图表所以我已经完成了与上面相同的其他3这里的事情运行良好所有来自DB的数据显示在图表中如果DB更新然后在页面刷新它显示但是作为我在上面写道，我不想刷新页面
为此我做了
var dt = JSON.stringify({
"arryKwh": arry_kwh,
"arryPower": arry_power,
"arryVoltage_1": arry_voltage_1,
"arryVoltage_2": arry_voltage_2,
"arryVoltage_3": arry_voltage_3,
"arryCurrent_1": arry_current_1,
"arryCurrent_2": arry_current_2,
"arryCurrent_3": arry_current_3
});
之后我完成了一个ajax调用并将数据传递给成功警报以查看它是否有我的数据
(function poll() {
setTimeout(function () {
$.ajax({
type: "POST",
url: "/Home/MultiGraph/",
data:dt,
success: function (data)
{
alert(data)
},
});
poll();
}, 5000);
})();
但是当我运行应用程序时，警告消息会显示this
我遗失了一些东西，但我不知道
我找到了SignalR，但我认为这是时间，因为我必须再次写所有东西
我想到的另一个解决方案是，如果我在视图或控制器中设置条件，它会检查数据库是否更新，而不是自动刷新页面
我很困惑任何帮助将不胜感激
