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. iOS push与present Controller的区别

    push与present都可以推出新的界面.present与dismiss对应,push和pop对应.present只能逐级返回,push所有视图由视图栈控制,可以返回上一级,也可以返回到根vc,其他 ...

  2. [Android Pro] Android 4.3 NotificationListenerService使用详解

    reference to : http://blog.csdn.net/yihongyuelan/article/details/40977323 概况 Android在4.3的版本中(即API 18 ...

  3. android viewPager 切换页面时防止fragment重新加载

    把限制页面数设置成应用一共的页面数就可以了 ViewPager.setOffscreenPageLimit(3);

  4. Swift - 文本输入框(UITextField)

    1,文本框的创建,有如下几个样式: UITextBorderStyle.none:无边框 UITextBorderStyle.line:直线边框 UITextBorderStyle.roundedRe ...

  5. CentOS出错You don't have permission to access on this server

    之前配置phpmyadmin的时候,在浏览器上输入http://192.168.8.250/phpmyadmin/ 也遇到了You don't have permission to access on ...

  6. C#的yield关键字

    using System; using System.Collections.Generic; using System.Reflection; using System.Text.RegularEx ...

  7. 那些年，我们在Django web开发中踩过的坑（一）——神奇的‘/’与ajax+iframe上传

    一.上传图片并在前端展示 为了避免前端整体刷新,我们采用ajax+iframe(兼容所有浏览器)上传,这样用户上传之后就可以立即看到图片: 上传前: 上传后: 前端部分html: <form s ...

  8. LightOJ 1030 Discovering Gold(期望 概率)

    正推,到达i的概率为p[i],要注意除了1和n外,到达i的概率并不一定为1 概率表达式为p[i] += p[j] / min(n - j, 6) 从j带过来的期望为exp[i] += exp[j] / ...

  9. Go 中的反射要点

    简介 反射是元数据编程的一种形式,指的是程序获得本身结构的一种能力.不同语言的反射模型实现不一样,本文中的反射,仅仅指的是Go语言中的反射模型. 类型以及接口 这个基本概念需要清晰,这里不详细展开. ...

  10. PHPCMS_v9 wap不同列表采用不同模板的方法

    .在phpcms\modules\wap\index.php中搜索 $template = ($TYPE[$typeid]['parentid']==0 && in_array($ty ...