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>

【Highcharts】 绘制饼图和漏斗图的更多相关文章

  1. Python培训：绘制饼图或圆环图

    使用pyplot的pie()函数可以快速地绘制饼图或圆环图,pie()函数的语法格式如下所示: 该函数常用参数的含义如下. ·x:表示扇形或楔形的数据. ·explode:表示扇形或楔形离开圆心的距离 ...

  2. DWR(AJAX)+Highcharts绘制曲线图，饼图

    基本需求: 1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据 2. 了解JSON(JavaScript Object Notation)的格式 3 ...

  3. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  4. 使用highcharts绘制美观的燃尽图

    使用highcharts绘制美观的燃尽图 助教在博客中介绍了两种绘制燃尽图的方法,但是我们组在使用时发现有些任务不适合写进issue,而且网站生成的燃尽图不是很美观,因此我们打算使用其他方法自己绘制燃 ...

  5. 使用 amcharts 和 highcharts 绘制多曲线时间趋势图的通用方法

    工作中用到, 这里分享一下. 可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图. 当然, 对图形没有过多装饰, 可以参考 API 文档: highcharts:   ...

  6. Highcharts 3D柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图

    Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效 ...

  7. C# WinForm开发系列之c# 通过.net自带的chart控件绘制饼图,柱形图和折线图的基础使用和扩展

    一.需要实现的目标是: 1.将数据绑定到pie的后台数据中,自动生成饼图. 2.生成的饼图有详细文字的说明. 1.设置chart1的属性Legends中默认的Legend1的Enable为false: ...

  8. 利用pandas读取Excel表格，用matplotlib.pyplot绘制直方图、折线图、饼图

    利用pandas读取Excel表格,用matplotlib.pyplot绘制直方图.折线图.饼图 数据: 折线图代码: import  pandas  as pdimport  matplotlib. ...

  9. 小白学Python（9）——pyecharts 绘制漏斗图 Funnel

    根据pyecharts的介绍一直没有研究明白def和return的用法,无法显示完整的漏斗图,还请各位指点. 根据上文绘制bar的方法,我更改了代码,做出了漏斗图,不过和demo不一样,而且数据也会随 ...

随机推荐

  1. mysql常用函数整理

    一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ABS(x) 返回x的绝对值 ) -- 返回1 CEIL(x),CEILING(x) 返回大于或等于x的最小整数 SELECT CEIL( ...

  2. XP/Win7下QTP11循环试用30天的破解方法

    XP/Win7下QTP11循环试用30天的破解方法. XP下:1.找到以下路径:C:\Documents and Settings\All Users\Application Data\SafeNet ...

  3. supersr--图形上下文的注意点

    - (void)test { // 不要自己调用drawRect:方法的原因: // 当系统调用drawRect:方法之前, 会创建一个与当前UIView的layer相关的图形上下文, 这样就可以保证 ...

  4. [Linux] vim的高亮查找操作

    reference :  http://blog.chinaunix.net/uid-20732478-id-763411.html 使用了VIM这么久,却一直无法牢记一些基本的操作指令.今天查找一个 ...

  5. JS ——window.onload与$(document).ready()

    我们常常在页面加载完成以后做一些操作,比如一些元素的显示与隐藏.一些动画效果.我们通常有两种方法来完成这个事情,一个就是window.onload事件,另一个就是JQuery的ready()方法.那么 ...

  6. iOS开发中调试小技巧

    对于软件开发而言,调试是必须学会的技能,重要性不言而喻.对于调试的技能,基本上是可以迁移的,也就是说你以前在其他平台上掌握的很多调试技巧,很多也是可以用在iOS开发中.不同语言.不同IDE.不同平台的 ...

  7. maven入门基础（转）

    maven介绍 maven是构建工具,也是构建管理工具.ant只是构建工具,因为不支持生成站点功能,只有预处理,编译,打包,测试,部署等功能. maven坐标 groupId:项目组织的逆向域名,比如 ...

  8. openfire 服务器名称：后面的黄色叹号

    然后点击重新获取证书,然后重新启动服务,问题解决!

  9. MVC – 3.EF（Entity Framework）

    1.实体框架(EF)简介 与ADO.NET的关系 全称是ADO.NET Entity Framework,是微软开发的基于ADO.NET的ORM(Object/Relational Mapping)框 ...

  10. Win7 DCOM 配置中我的电脑出现红色箭头并且无属性显示的解决方法

    http://blog.csdn.net/embededvc/article/details/19234479