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. AFNetworking request failed unacceptable content type text/html

    今天体验AFNetwork 3.1.0 进行数据解析,但是解析数据控制台一直都输出这样的 error 结果: 于是,照着以前AFN2.+版本的进行设置: 结果发现在新版本的 AFN 上不能设置了.既然 ...

  2. [Android Pro] 关于inputStream.available()方法获取文件的总大小

    reference to :http://hold-on.iteye.com/blog/1017449 如果用inputStream对象的available()方法获取流中可读取的数据大小,通常我们调 ...

  3. [Android Pro] synchronized与static synchronized 的区别

    reference to :  http://www.cnblogs.com/shipengzhi/articles/2223100.html 1.synchronized与static synchr ...

  4. September 26th 2016 Week 40th Monday

    The land didn't move, but moved. The sea wasn't still, yet was still. 大地止而亦行,大海动而亦静. Still waters ru ...

  5. PullToRefreshScrollView嵌套SwipeMenuListView冲突问题解决

    参考: http://blog.csdn.net/u012255016/article/details/46048797 public class NoScrollSwipeMenuListView ...

  6. 做一个App前需要考虑的几件事

    本文转载于文章原文链接,版本归原作者所有! 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 App 有了一定规模后, ...

  7. 在ubuntu上搭建开发环境6---安装和使用vim及其插件（Pathogen和NERDTree）

    2015.09.08 更为详细的配置vim的方法,请参见我的新整理的文章:http://segmentfault.com/a/1190000003722928 Vim安装 命令: sudo apt-g ...

  8. FTP是否可以修改为其它端口？

    对服务器的ftp端口进行了修改,把21端口改了,比如221端口,就这样用221连接的时候,连接登录成功,但打不开目录,为何,总结如下: 1.完成一个FTP的传输过程不仅仅只需要21一个端口,而是2个端 ...

  9. STL Map的使用

    Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力.下面就通过示例记录一下map的使用: 一.向map中 ...

  10. VS2012 配置 OpenCV3.0

    VS2012 配置 opencv3.0,相比之前的版本,3.0的配置简单了好多. 通过配置属性文件,可以做到一次配置,重复使用! 根据文章的操作在 win7 64bit VS2012 下成功配置 op ...