1.outModel类设计
设计outModel类首先研究下Highcharts中series的data数据格式，发现饼图和漏斗图都可以使用这样格式的数据
series: [{
name: 'Unique users',
data: [
['Website visits', 15654],
['Downloads', 4064],
['Requested price list', 1987],
['Invoice sent', 976],
['Finalized', 846]
]
}]
刚看到数据格式的时候，会不自觉的想起Dictionary<string,int>或者Hashtable ,outModel就会设计成以下两种形式
public class HomeOut
{
public string Name { get; set; }//渲染series[0].name
public Dictionary<string, int> Dicdata { get; set; }//渲染series[0].data
}
或者
public class HomeOut
{
public string Name { get; set; }//渲染series[0].name
public Hashtable Ht { get; set; }//渲染series[0].data
}
但是会发现当 return Json(outModel, JsonRequestBehavior.AllowGet);的时候，前台获取到的Dicdata 或者Hashtable 只能是object Object,所以顺其自然的会想到Jquery解析数据，的确能解析成功，但是在把数据填充Highcharts的时候会发现怎么也填充不对，push()和chart.series[0].data=解析过的json数据，都不能实现。也许是自己研究的不对，有看到的园友，成功实现的请留言指导。
后来，迫不得已只能才用以前自己使用Highcharts绘制柱状图和折线图的方法了，下面开始
设计outModel 的时候，我设计成了这样
public class HomeOut
{
public string Name { get; set; }
public List<TempClass> tempClass { get; set; }
}
public class TempClass
{
public string name { get; set; }
public int y { get; set; }
}
之所以设计成这样，我是发现绘制饼图和漏斗图的时候series还可以这样写
饼图:
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
漏斗图
series: [{
name: 'Unique users',
data: [
['Website visits', 15654],
['Downloads', 4064],
{
name:'Requested price list',
y:1987
},
['Invoice sent', 976],
['Finalized', 846]
]
}]
对比之下，两个图表的data都可以才用{name:'***',y:***}格式
下面贴出全部代码（排版还不会，就不整了）
HomeCotroller
public ActionResult Index2()
{
return View();
}
public ActionResult GetData()
{
var outModel = new HomeOut();
//Dictionary<string, int> dic = new Dictionary<string, int>() {
//{"wo",1990},
//{"you",1200},
//{"she",1000},
//{"it",800}
//};
//Hashtable ht = new Hashtable();
//ht.Add("wo", 1990);
//ht.Add("you", 1900);
//ht.Add("she", 1800);
//ht.Add("it", 1700);
//ht.Add("he", 1600);
//outModel.dicdata = dic;
outModel.Name = "";
List<TempClass> tempClassList = new List<TempClass>(){
new TempClass(){name="wo",y=},
new TempClass(){name="you",y=},
new TempClass(){name="she",y=},
new TempClass(){name="he",y=}
};
outModel.tempClass = tempClassList;
return Json(outModel, JsonRequestBehavior.AllowGet);
}
cshtml页面
<body>
<div id="container"></div>
<input type="button" value="sub" id="sub" />
</body>
js
<script>
var options =
{
chart: {
renderTo: 'container',
type: 'funnel',
marginRight: 100
},
title: {
text: 'Sales funnel',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: 'black',
softConnector: true
},
neckWidth: '30%',
neckHeight: '25%' //-- Other available options
// height: pixels or percent
// width: pixels or percent
}
},
legend: {
enabled: false
},
series: [{
name: '访问量',
data: [
['Website visits', 15654],
['Downloads', 4064],
['Requested price list', 1987],
['Invoice sent', 976],
['Finalized', 846]
]
}]
} </script>
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart(options);
GetD();
});
$("#sub").click(function () {
GetD();
});
function GetD() {
$.ajax({
type: 'POST',
url: '/Home/GetData',
data: {},
success: function (result) {
options.series[0].data = result.tempClass;
var chart = new Highcharts.Chart(options);
}
});
}
</script>