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. 火狐----此地址使用了一个通常用于网络浏览以外的端口。出于安全原因，Firefox 取消了该请求。

    FirFox打开80以外的端口,会弹出以下提示: “此地址使用了一个通常用于网络浏览以外的端口.出于安全原因,Firefox 取消了该请求.”.经网上搜索,解决方法如下: 在Firefox地址栏输入a ...

  2. 根据OSG中的ref_ptr和Reference简化的智能指针

    main.cpp测试代码 #include "TestSmartPointer" void fun() { SP<TestSmartPointer> sp1=new T ...

  3. Linux iostat字段解析

    iostat主要用于监控系统设备的IO负载情况,iostat首次运行时显示自系统启动开始的各项统计信息,之后运行iostat将显示自上次运行该命令以后的统计信息.用户可以通过指定统计的次数和时间来获得 ...

  4. Redis事件管理（三）

    Redis的事件管理和定时器的管理都是自己来实现的,Redis的事件管理分为两部分,一部分是封装了系统的异步事件API,还有一部分是在这基础上封装了一个通用的事件管理器,根据具体的系统来决定具体使用哪 ...

  5. SQL存储过程大全

    --增加 create proc usp_insertToText ), ), @usitPrice decimal as begin insert into TEST1 output inserte ...

  6. C#命名规范的几点建议

    1.最好以<Company>.<Component>做为namespace的格式 2.考虑是否需要将namespace设置为复数,如:FCL中的System.Collectio ...

  7. Java使用JDBC连接MySQL数据库

    1.引用 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写 ...

  8. Swift - UIViewController

    UIViewController类详解: 通过Nib文件初始化 init(nibName nibName: String?, bundle nibBundle: NSBundle?) println( ...

  9. NYOJ题目62笨小熊

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAr4AAAK1CAIAAAChInrhAAAgAElEQVR4nO3dO3LjutaG4X8Szj0Qxx

  10. TCP 四次握手

    TCP协议中的三次握手和四次挥手(图解) http://blog.csdn.net/whuslei/article/details/6667471/