无聊写了一个最简单的MVC4+Highcharts连数据库例子

时间:2021-11-10 03:10:53

乱搞了个数据库 后面发现没定INT类型 直接将ID当数据显示了

无聊写了一个最简单的MVC4+Highcharts连数据库例子

效果图:

无聊写了一个最简单的MVC4+Highcharts连数据库例子

前端

 @{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/Highcharts-4.0.3/js/highcharts.js"></script>
<script src="~/Scripts/Highcharts-4.0.3/js/modules/exporting.js"></script>
<script src="~/Scripts/Highcharts-4.0.3/js/highcharts-3d.js"></script>
<script type="text/javascript"> $(function () { var values = "";
var data1 = [];
var months = [];
//var a = [29.9, 71.5, 106.4, 129.2, 144]
$.ajax({
url: '../Home/se',
type: 'post',
dataType: "json", success: function (msg) {
//var values = JSON.stringify(msg)
//alert(msg.length)
for (var i = 0; i < msg.length; i++) {
//alert("123")
//values += "11" + msg[i].tem + "11"
//var a= values.push(bb[i].tem);
data1.push(msg[i].id)
months.push(msg[i].months)
} var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: 'Chart rotation demo'
},
xAxis: {
categories:months },
yAxis: {
min: 0,
title: {
text: 'id'
}
},
subtitle: {
text: 'Test options by dragging the sliders below'
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
data:data1
}]
});
// Activate the sliders
$('#R0').on('change', function () {
chart.options.chart.options3d.alpha = this.value;
showValues();
chart.redraw(false);
});
$('#R1').on('change', function () {
chart.options.chart.options3d.beta = this.value;
showValues();
chart.redraw(false);
});
function showValues() {
$('#R0-value').html(chart.options.chart.options3d.alpha);
$('#R1-value').html(chart.options.chart.options3d.beta);
}
showValues();
}
}) });
</script>
<title>Index</title>
</head>
<body>
<div id="container" style="min-width: 700px; height: 400px"></div> <div id="sliders" style="min-width: 310px; max-width: 800px; margin: 0 auto;">
<table>
<tr>
<td>Alpha Angle</td>
<td>
<input id="R0" type="range" min="0" max="45" value="15" />
<span id="R0-value" class="value"></span></td>
</tr>
<tr>
<td>Beta Angle</td>
<td>
<input id="R1" type="range" min="0" max="45" value="15" />
<span id="R1-value" class="value"></span></td>
</tr>
</table>
</div>
</body>
</html>

后台

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using 表格.Models; namespace 表格.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
columnprictureEntities db = new columnprictureEntities();
public ActionResult Index()
{
return View();
}
public ActionResult se()
{ var d = (from b in db.prc select b).ToList();
List<Models.prc> bb = (from dd in db.prc select dd).ToList();
return Json(d, JsonRequestBehavior.AllowGet);
} }
}