Highcharts 绘制饼图和漏洞图
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 = "123"; List<TempClass> tempClassList = new List<TempClass>(){ new TempClass(){name="wo",y=1}, new TempClass(){name="you",y=2}, new TempClass(){name="she",y=3}, new TempClass(){name="he",y=3} }; 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>