@{
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. 使用parseJSON代替eval

    有些程序员如果没有很好的在javascript中解析json数据,往往会直接eval把json转成js对象,这时候如果json的数据中包含了被注入的恶意数据,则可能导致代码注入的问题. 正确的做法是分 ...

  2. div 布局

    转:http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理 ...

  3. hihocoder #1301 : 筑地市场 数位dp+二分

    题目链接: http://hihocoder.com/problemset/problem/1301?sid=804672 题解: 二分答案,每次判断用数位dp做. #include<iostr ...

  4. EXTJS学习笔记

    由于公司统一决策,决定使用EXTJS作为前台的开发UI框架,所以从今天开始学习EXTJS,对学习过程中遇到的问题做记录. 首先第一个问题:为什么要用ExtJS作为公司开发基础架构?   推荐一篇文章: ...

  5. MyEclipse 2015 Stable 1.0下载安装破解日志

    前言 这2天下载了许多myeclipse版本,基本上是14/15版本的,各种破解均告以失败,这次下载了贴吧一个吧友提供的版本,现已破解.破解结果现不好说--目前已装SVN,根据经验,只有等待一定时间验 ...

  6. 【POJ】【1061】/【BZOJ】【1477】青蛙的约会

    扩展欧几里德 根据题意列出不定方程: (x+m*T)-(y+n*T)=k*L; //T表示跳了T次,由于是环,可能追了多圈,所以结果应为k*L 化简得  T(m-n)-kL=y-x; 这就成了我们熟悉 ...

  7. 0327定时执行--存储过程--dbms_job--dbms_scheduler.create_job

    --oracle job 定时执行 存储过程 --建一张测试表 create table Person( name ), sex ) ); / --创建测试的存储过程 create or replac ...

  8. java和javascript真的有关系=。=

    相同点:1. 内存管理,两者都采用GC来对内存进行回收.因此Java与javascript的内存泄露情况十分相似. 2. 代码编译为机器码后由中间件执行:Java使用前会编译为字节码后由JVM执行,V ...

  9. [设计模式] 4 原型模式 prototype

    设计模式:可复用面向对象软件的基础>(DP)本文介绍原型模式和模板方法模式的实现.首先介绍原型模式,然后引出模板方法模式. DP书上的定义为:用原型实例指定创建对象的种类,并且通过拷贝这些原型创 ...

  10. 如何解决VS启动越来越慢

    VS2013 用久后,现在启动和打开项目变得很慢 解决方案: A.清理缓存 VS2010清理缓存:启用vs2010命令行工具:在vs2010命令提示符下,执行devenv.exe /resetuser ...