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 { 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
      
        dic = new Dictionary
       
        () { //{"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
        
          tempClassList = new List
         
          (){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页面

 

js