【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]
　　　　　　　　　　　　　　　　　　]
　　　　　　　　　　　　}]

View Code