【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

漏斗图

 series: [{
　　　　　name: 'Unique users',
　　　　　data: [
　　　　　['Website visits', 15654],
　　　　　['Downloads', 4064],
　　　　　{
　　　　　　　name:'Requested price list',
　　　　　　　y:1987
　　　　　},
　　　　　['Invoice sent', 976],
　　　　　['Finalized', 846]
　　　　　　　]
　　　　}]

View Code

　　　　　对比之下，两个图表的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);
}

View Code

cshtml页面

<body>
<div id="container"></div>
<input type="button" value="sub" id="sub" />
</body>

View Code

<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
//  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>

View Code

【Highcharts】 绘制饼图和漏斗图

【Highcharts】绘制饼图和漏斗图