Asp.net mvc4 + HighCharts + 柱状图
前端代码：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.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/ViewChart',
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].tem)
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
}]
});
}
})
});
</script>
<title>Index</title>
</head>
<body>
<div id="container" style="min-width: 700px; height: 400px"></div>
</body>
</html>
Controller代码：
zmTestEntities entity = new zmTestEntities();
//柱状
public ActionResult Index()
{
return View();
}
public ActionResult ViewChart()
{
var q = (from h in entity.HighCharts select h).ToList();
return Json(q, JsonRequestBehavior.AllowGet);
}