【Highcharts】 绘制饼图和漏斗图
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】 绘制饼图和漏斗图的更多相关文章
- Python培训：绘制饼图或圆环图
使用pyplot的pie()函数可以快速地绘制饼图或圆环图,pie()函数的语法格式如下所示: 该函数常用参数的含义如下. ·x:表示扇形或楔形的数据. ·explode:表示扇形或楔形离开圆心的距离 ...
- DWR(AJAX)+Highcharts绘制曲线图，饼图
基本需求: 1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据 2. 了解JSON(JavaScript Object Notation)的格式 3 ...
- HighCharts之2D柱状图、折线图和饼图的组合图
HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...
- 使用highcharts绘制美观的燃尽图
使用highcharts绘制美观的燃尽图 助教在博客中介绍了两种绘制燃尽图的方法,但是我们组在使用时发现有些任务不适合写进issue,而且网站生成的燃尽图不是很美观,因此我们打算使用其他方法自己绘制燃 ...
- 使用 amcharts 和 highcharts 绘制多曲线时间趋势图的通用方法
工作中用到, 这里分享一下. 可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图. 当然, 对图形没有过多装饰, 可以参考 API 文档: highcharts: ...
- Highcharts 3D柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图
Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效 ...
- C# WinForm开发系列之c# 通过.net自带的chart控件绘制饼图,柱形图和折线图的基础使用和扩展
一.需要实现的目标是: 1.将数据绑定到pie的后台数据中,自动生成饼图. 2.生成的饼图有详细文字的说明. 1.设置chart1的属性Legends中默认的Legend1的Enable为false: ...
- 利用pandas读取Excel表格，用matplotlib.pyplot绘制直方图、折线图、饼图
利用pandas读取Excel表格,用matplotlib.pyplot绘制直方图.折线图.饼图 数据: 折线图代码: import pandas as pdimport matplotlib. ...
- 小白学Python（9）——pyecharts 绘制漏斗图 Funnel
根据pyecharts的介绍一直没有研究明白def和return的用法,无法显示完整的漏斗图,还请各位指点. 根据上文绘制bar的方法,我更改了代码,做出了漏斗图,不过和demo不一样,而且数据也会随 ...
随机推荐
- yum Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again
今天使用yum时出现如上问题,解决办法: 1.编辑:/etc/yum.repos.d/epel.repo 将baseurl的注释取消, mirrorlist注释掉,如图:
- 60. Permutation Sequence
题目: The set [1,2,3,…,n] contains a total of n! unique permutations. By listing and labeling all of t ...
- September 9th 2016 Week 37th Friday
Within you, I lose myself. 有了你,我迷失了自我. I never had such feeling, maybe just because I never invested ...
- iOS 自定义返回按钮,保留系统滑动返回
原文链接 自定义返回按钮保留系统滑动返回手势.gif 1.简介 使用苹果手机,最喜欢的就是用它的滑动返回.作为一个开发者,我们在编写很多页面的时候,总是会因为这样那样的原因使得系统的滑动返回不可用.使 ...
- 手写代码自动实现自动布局，即Auto Layout的使用
手写代码自动实现自动布局,即Auto Layout的使用,有需要的朋友可以参考下. 这里要注意几点: 对子视图的约束,若是基于父视图,要通过父视图去添加约束. 对子视图进行自动布局调整,首先对UIVi ...
- hdu1018(数位)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1018 题意:求n!的数位(即n!有多少位): 思路:对于一个数x,它的数位ans=log10(x): ...
- php提示 Notice: Use of undefined constant name - assumed
我们知道php在数组中写变量有二几种方法,我们出现这种提示就是你写成了[name]这种所以会有Notice: Use of undefined constant name - assumed name ...
- Delphi中线程类TThread实现多线程编程2---事件、临界区、Synchronize、WaitFor……
接着上文介绍TThread. 现在开始说明 Synchronize和WaitFor 但是在介绍这两个函数之前,需要先介绍另外两个线程同步技术:事件和临界区 事件(Event) 事件(Event)与De ...
- Jquery自定义扩展方法（二）--HTML日历控件
一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看 ...
- java 杂物间 （二） Spring Web
需要明确记住的继承关系