【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 = "";
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>
上一篇:canvas绘制三等分饼型图


下一篇:深圳MPD大会,五大专题一会尽享