HighCharts 饼图
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
} @section PageSpecificJavascriptIncludes{
<script src="~/Assets/Highcharts-4.1.8/js/highcharts.js"></script>
<script src="~/Assets/Highcharts-4.1.8/js/themes/grid.js"></script>
<script type="text/javascript"> Highcharts.setOptions({
yAxis: {
gridLineDashStyle: 'ShortDot',
gridLineColor: '#FFB5B5',
tickWidth: 1,
tickColor: '#FFB5B5',
tickPosition: 'inside' },
xAxis: {
lineColor: '#333',
lineWidth: 2,
tickPosition: 'inside',
tickColor: '#888888',
tickLength: 5
}, });
$(function () {
donateChart(new Date().getFullYear()); $("#year").change(function () {
var year = $(this).val();
console.log(year);
if (year != "") {
donateChart(year);
}
});
});
function donateChart(year) {
//X
var categories = [];
//Y
var db=[,]
var datas = [];
var dbdata = [,];
var url = "@Url.Action("GetData","StatisticAnalysis")";
var param = new Object();
//param.id = year;
$.z_ajaxAction(url, param, function (result) {
var obj = result;
var length = obj.length;
for (var i = 0; i < length; i++)
{
//类型
categories[i] = obj[i].Type;
//比例
datas[i] = parseInt(obj[i].Proportion);
//数组
db[i] = [categories[i], datas[i]]
} createChart(categories, db, year);
}); } function createChart(categories, db, year) { new Highcharts.Chart({
chart: {
renderTo: "container1",
backgroundColor: null,
spacingRight: 20
},
credits: {
enabled: false
},
title: {
text: year+'年销售收入比例构成', y: 10
},
colors: [
'#0088cc',
'#5CB85C',
' #FFB5B5',
'#FF2D2D',
'#FFFF37',
'#C07AB8'
], xAxis: {
categories: categories, },
exporting: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
}, series: [{
name: '比例',
data: db,
type: 'pie',
tooltip: {
valueSuffix: '%'
}
}
]
});
}
</script> }
<div id="container1" style="height: 300px;max-width:500px"> </div>
<select id="year">
<option value="">选择年份</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
</select>
HighCharts 饼图的更多相关文章
- highCharts 饼图动态加载
饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath( ...
- Highcharts 饼图 文字颜色设置
设置饼图对应的提示文字的颜色与饼图块状一样,demo如下: $(function () { $('#container').highcharts({ chart: { plotBackgroundCo ...
- FusionCharts和highcharts 饼图区别!
FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...
- highcharts 饼图显示数据比例如何保留二位小数
var NewPerCent=parseFloat(NewPerCent.toString()).toFixed(2);return '<b>'+ this.point.name +'&l ...
- Highcharts 饼图数值显示在图形上
1.引用js文件 <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1 ...
- highcharts饼图
效果: JSON加载数据: var chartseries2 = [ { name: '完成' + data.rate + '%', y: data.rate }, { name: '未完成' + d ...
- Highcharts之饼图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HighCharts 在IE8下饼图不显示的问题
HighCharts饼图用来做数据统计时,在IE8下发现某些图形不能正确显示出来. 在IE8下面会报 'this.renderer.gradients' 为空或不是对象 这样的错误.. 解决方法: ...
- 【Highcharts】 绘制饼图和漏斗图
1.outModel类设计 设计outModel类首先研究下Highcharts中series的data数据格式,发现饼图和漏斗图都可以使用这样格式的数据 series: [{ name: 'Uniq ...
随机推荐
- Ubuntu 常用软件安装方法
macubuntu 安裝方法: $wget https://github.com/downloads/ChinaLuo/Mac_Ubuntu/Mac_Ubuntu-12.04.tar.gz -O /t ...
- Windows 10 响应式设计和设备友好的开发
使用Effective pixels有效像素设计UI 什么是缩放像素和Effective有效像素: 当你的应用程序运行在Windows的设备,系统用一个算法控制的规范,字体,和其他UI元素显示在屏幕上 ...
- DispatcherServlet--Spring的前置控制器作用简介
参考网址:http://jinnianshilongnian.iteye.com/blog/1602617 Struts有一个ActionServlet,用来完成前置控制器(分发器)的功能.其实,所有 ...
- UI框架说明
JQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编 ...
- POJ 2184 Cow Exhibition (01背包的变形)
本文转载,出处:http://www.cnblogs.com/Findxiaoxun/articles/3398075.html 很巧妙的01背包升级.看完题目以后很明显有背包的感觉,然后就往背包上靠 ...
- HDU 3038 How Many Answers Are Wrong(带权并查集)
太坑人了啊,读入数据a,b,s的时候,我刚开始s用的%lld,给我WA. 实在找不到错误啊,后来不知怎么地突然有个想法,改成%I64d,竟然AC了 思路:我建立一个sum数组,设i的父亲为fa,sum ...
- HDU 2473 Junk-Mail Filter(并查集+删点,设立虚父节点/找个代理)
题意:有N封邮件, 然后又两种操作,如果是M X Y , 表示X和Y是相同的邮件.如果是S X,那么表示对X的判断是错误的,X是不属于X当前所在的那个集合,要把X分离出来,让X变成单独的一个.最后问集 ...
- mysql 中 isnull 和 ifnull 判断字段是否为null
对于统计count(type)和avg(type) 都不起作用 SQL中有ISNULL方法,介绍如下: ISNULL使用指定的替换值替换 NULL. 语法ISNULL ( check_expressi ...
- [2-sat]HDOJ3622 Bomb Game
题意:给n对炸弹,每对炸弹选其中一个爆炸. 每个炸弹爆炸的半径相同 圆不能相交, 求最大半径 2-sat简介 二分半径, 枚举n*2个炸弹 若i炸弹与j炸弹的距离小于半径*2 则建边 比如 第一对炸 ...
- TopCoder 649 div1 & div2
最近一场TC,做得是在是烂,不过最后challenge阶段用一个随机数据cha了一个明显错误的代码,最后免于暴跌rating,还涨了一点.TC题目质量还是很高的,非常锻炼思维,拓展做题的视野,老老实实 ...