我查看了以下链接
Binding json result in highcharts for asp.net mvc 4,highcharts with mvc C# and sql,HighChart Demo以及其他许多链接.但是,我找不到一个工作演示,演示如何使用数据库中的数据实现高图.
@H_404_29@解决方法
目的：
我想生成一个实时高清图线图,从我的数据库中获取数据.我想要的是与第三个链接非常相似,它提供了随机生成的值的实时高图.它也类似于X轴和Y轴,因为我希望我的x轴是“时间”(我的数据库中有一个DateTime列),而y轴是一个整数(我有一个变量用于以及在我的数据库中).
在将模型数据发送到我的剃刀视图时,我需要帮助.
请注意,我已经使用SignalR来显示实时表.我也想知道它是否也可用于自动更新高图.
下面是我在视图中的脚本的代码片段.我使用链接3中提供的代码生成高图.请告诉我应该在哪里对代码应用更改.
@section Scripts{
<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/SignalR/Hubs"></script>
<script type="text/javascript">
$(document).ready(function () {
// Declare a proxy to reference the hub.
var notifications = $.connection.dataHub;
//debugger;
// Create a function that the hub can call to broadcast messages.
notifications.client.updateMessages = function () {
getAllMessages()
};
// Start the connection.
$.connection.hub.start().done(function () {
alert("connection started")
getAllMessages();
}).fail(function (e) {
alert(e);
});
//Highchart
Highcharts.setoptions({
global: {
useUTC: false
}
});
//Fill chart
$('#container').highcharts({
chart: {
type: 'spline',animation: Highcharts.svg,// don't animate in old IE
marginRight: 10,events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(),// current time
y = Math.random();
series.addPoint([x,y],true,true);
},1000);//300000
}
}
},title: {
text: 'Live random data'
},xAxis: {
type: 'datetime',tickPixelInterval: 150
},yAxis: {
title: {
text: 'Value'
},plotLines: [{
value: 0,width: 1,color: '#808080'
}]
},tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%s',this.x) + '<br/>' +
Highcharts.numberFormat(this.y,2);
}
},legend: {
enabled: false
},exporting: {
enabled: false
},series: [{
name: 'Random data',data: (function () {
// generate an array of random data
var data = [],time = (new Date()).getTime(),i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,y: Math.random()
});
}
return data;
}())
}]
});
});
function getAllMessages() {
var tbl = $('#messagesTable');
var data = @Html.Raw(JsonConvert.SerializeObject(this.Model))
$.ajax({
url: '/home/GetMessages',data: {
id: data.id,},contentType: 'application/html ; charset:utf-8',type: 'GET',dataType: 'html'
}).success(function (result) {
tbl.empty().append(result);
$("#g_table").dataTable();
}).error(function (e) {
alert(e);
});
}
</script>
}
更新的代码
//Highchart Highcharts.setoptions({ global: { useUTC: false } }); //Fill chart chart = new Highcharts.Chart({ chart: { renderTo: 'container',defaultSeriesType: 'spline',events: { load: $.connection.hub.start().done(function () { alert("Chart connection started") var point = getAllMessagesforChart(); var series = this.series[0]; setInterval(function (point) { // add the point series.addPoint([point.date_time,point.my_value],true) },1000); }).fail(function (e) { alert(e); }) } } title: { text: 'Live random data' },xAxis: { type: 'datetime',tickPixelInterval: 150,maxZoom: 20 * 1000 },yAxis: { minPadding: 0.2,maxPadding: 0.2,title: { text: 'Value',margin: 80 } },series: [{ name: 'Random data',data: [] }] }); function getAllMessagesforChart() { var data = @Html.Raw(JsonConvert.SerializeObject(this.Model)) $.ajax({ url: '/home/GetMessagesforChat',dataType: 'html' }).success(function (data) { data = JSON.parse(data); //data_graph = [].concat(data); //$("#debug").html(data_graph); }).error(function (e) { alert(e); }); return data; //return data_graph;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
