@{
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 饼图的更多相关文章

  1. highCharts 饼图动态加载

    饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath( ...

  2. Highcharts 饼图 文字颜色设置

    设置饼图对应的提示文字的颜色与饼图块状一样,demo如下: $(function () { $('#container').highcharts({ chart: { plotBackgroundCo ...

  3. FusionCharts和highcharts 饼图区别!

    FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...

  4. highcharts 饼图显示数据比例如何保留二位小数

    var NewPerCent=parseFloat(NewPerCent.toString()).toFixed(2);return '<b>'+ this.point.name +'&l ...

  5. Highcharts 饼图数值显示在图形上

    1.引用js文件 <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1 ...

  6. highcharts饼图

    效果: JSON加载数据: var chartseries2 = [ { name: '完成' + data.rate + '%', y: data.rate }, { name: '未完成' + d ...

  7. Highcharts之饼图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. HighCharts 在IE8下饼图不显示的问题

    HighCharts饼图用来做数据统计时,在IE8下发现某些图形不能正确显示出来. 在IE8下面会报  'this.renderer.gradients' 为空或不是对象 这样的错误.. 解决方法: ...

  9. 【Highcharts】 绘制饼图和漏斗图

    1.outModel类设计 设计outModel类首先研究下Highcharts中series的data数据格式,发现饼图和漏斗图都可以使用这样格式的数据 series: [{ name: 'Uniq ...

随机推荐

  1. android重写view和viewgroup的区别

    重写view: View类一般用于绘图操作,重写它的onDraw方法,但它不可以包含其他组件,没有addView(View view)方法. 重写viewgroup: ViewGroup是一个组件容器 ...

  2. IIS搭建本地服务器,花生壳实现外网通过域名访问网站

    配置服务器 作为一个青年,没有实力,做不出标图所示的服务器. 作为一个学生,买不起服务器 作为一个小孩,买不起域名 但别忘了 作为一个平民玩家,只要有耐心 装备迟早会做出来的 (注:感觉有钱与没钱还是 ...

  3. Virtualbox虚拟机设置不完全笔记

    先说说我想实现的东西,我想在虚拟机安装各种开发环境,我个人在学习Node.然后我装了一个Ubuntu Server,所以我又想共享一个windows下的文件夹,这样可以让我在windows下开发,在L ...

  4. 'mysql' 不是内部或外部命令,也不是可运行的程序或批处理文件的解决办法

    前言: 本文的解决方法来自http://www.cnblogs.com/xionghui/archive/2012/04/11/2442404.html --感谢! 问题描述:新电脑装mysql后在c ...

  5. Tern Server Timeout

  6. 剑指offer--面试题6

    题目:由前序.中序遍历序列重建二叉树 虽然思路能想到,但是实际写却无从下手...下面重现作者代码,多多实践... #include<exception> //首先定义二叉树节点 struc ...

  7. Linux GPT分区

    parted /dev/sdb  //parted  sdb磁盘 mklabel gpt        //设置该磁盘分区为gpt   mkpart primary 0% 100%   //划分分区大 ...

  8. [C/CPP系列知识] Type difference of character literals 和 bool in C and C++

    C/C+中的每一个常亮(every literal)都是有类型的,例如10 就是int型的,因此siziof(10)和sizeof(int)是相同的,但是字符型常亮(‘a’)在C和C++中有不同的变量 ...

  9. Unity3D脚本中文系列教程(一)

    原地址:http://dong2008hong.blog.163.com/blog/static/46968827201403115643431/?suggestedreading&wumii ...

  10. 别让安全问题拖慢了 DevOps!

    DEVSECOPS 所面临的挑战 敏捷开发和 DevOps 方法的出现使软件开发的速度与质量都有所提升,但它们不经意地也为安全机构增压不少.从前的安全策略是基于静态数据的,而在产品上线前才应用这些策略 ...