【发布时间】：2015-07-06 11:33:32
【问题描述】：
我查看了以下链接 Binding json result in highcharts for asp.net mvc 4、highcharts with mvc C# and sql、HighChart Demo 和许多其他链接。但是，我找不到演示如何使用数据库中的数据实现高图的工作演示。
目标： 我想生成一个实时的 highchart 线图，从我的数据库中获取数据。我想要的与第三个链接非常相似，它提供了一个带有随机生成值的实时高图。 X 轴和 Y 轴也相似，因为我希望 x 轴为“时间”（我的数据库中有一个 DateTime 列），y 轴为整数（我有一个变量）以及在我的数据库中）。
在将模型数据发送到我的剃刀视图时，我需要帮助。
请注意，我已经在使用 SignalR 来显示实时表。我也想知道它是否也可以用来自动更新highchart。
下面是视图中我的脚本的代码 sn-p。我已使用链接 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, 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',
data: {
id: data.id,
},
contentType: 'application/html ; charset:utf-8',
type: 'GET',
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;
}
【问题讨论】：
-
很抱歉，您从哪里获得数据库资料？数据库是什么样的？
-
首先，我有一个实体框架，我将 ms sql 数据库连接到我的 Web 应用程序。对于实时表 SignalR，我创建了一个模型类，就像此链接 venkatbaggu.com/… 提供的方法一样。所以基本上我不确定我是否应该使用 EF 或其他用于 signalR 来生成高图。至于我的数据库，它是一个简单的表，由 3 列组成，分别是 id、日期时间和整数值。
-
最简单的场景。 1）准备与数据库通信的脚本并返回带有点的json。 2）。在高图中捕获加载事件，例如示例。不使用 math.random，从第 1 点开始使用自定义脚本调用 ajax 到 url。3) 将点添加到图表。
-
非常感谢您澄清这些步骤。但是我对第二步有两个问题，你的意思是我从“load:”部分调用 ajax，但是“series:”部分会发生什么，我相信这使它成为现实，所以我应该在那里放什么。而且由于我是 json 的新手，如果您为我提供一些第一步的代码或链接，我将不胜感激。谢谢@SebastianBochan
-
我的意思是这样的，jsfiddle.net/zcogcjyx，但显然您需要将 data.x / data.y 调整为您的 json 中的字段。
标签： ajax json highcharts