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 - ARC改为非ARC

    1.project -> Build settings -> Apple LLVM complier 3.0 - Language -> objective-C Automatic ...

  2. mysql my.cnf配置文件详解

    本配置文件针对Dell R710,双至强E5620.16G内存的硬件配置.CentOS 5.6 64位系统,MySQL 5.5.x 稳定版.适用于日IP 50-100w,PV 100-300w的站点, ...

  3. Ubuntu离线更新flashplugin

    当网络太烂时,Ubuntu更新可能会卡在下载flashplugin上面,继而出错.在U论坛上找到一篇帖子,寻到成功安装flashplugin-installer的方法: 1.首先使用sudo apt- ...

  4. php上传文件进度条

    ps:本文转自脚本之家 Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前 ...

  5. CLR via C#（11）-无参属性、有参数属性(索引器)

    一. 无参属性 1. 定义属性 无参属性就是我们最常见的属性方式,在赋值时可以加入一定的逻辑判断.属性的定义其实不复杂,先看个直观的例子: 说明: 属性要定义名称和类型,且类型不能是void. 属性是 ...

  6. Linux内核驱动之GPIO子系统(一)GPIO的使用

    转自:http://blog.csdn.net/mirkerson/article/details/8464290 一 概述 Linux内核中gpio是最简单,最常用的资源(和 interrupt , ...

  7. .net学习之Attribute特性和EF关键知识点

    一.Attribute特性/标签1.Attribute用来对类.属性.方法等标注额外的信息,贴一个标签简单的说,定制特性Attribute,本质上就是一个类,它为目标元素提供关联附加信息,并在运行时以 ...

  8. python多进程程序之间交换数据的两种办法--Queue和Pipe

    合在一起作的测试. #!/usr/bin/env python # -*- coding: utf-8 -*- import multiprocessing import random import ...

  9. 【131031】struts 1 中 <html:form>

    <DIV>来看看 使用 ActionForm 这个主题,当时使用了一个静态表单网页:<BR>* form.htm<BR><BR><BR>&l ...

  10. JVM_Bind:8080 的解决办法【131031】

    出错情况:运行 Tomcat 时报错 含义:8080 位置显示的端口被其他进程占用 解决方法: 方法1: 开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID ...