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下requests 无法找到模块packages
我明明用pip install requests安装成功了,但是依然报下面的错 错误1 requests.packages.urllib3.disable_warnings()AttributeErr ...
- Java7 新特性 数值文本表示法
今天和大家分享下 java7中新特性-数值文本表示法 首先,在原来jdk1.6中 如果需要将一个二进制的数值转换成十进制的话,一般情况下都会以下面的代码方式去实现. public static voi ...
- 【POJ】【2420】A Star not a Tree?
模拟退火 Orz HZWER 这题的题意是在二维平面内找一点,使得这点到给定的n个点的距离和最小……0.0 模拟退火算法请戳这里 //POJ 2420 #include<ctime> #i ...
- Matlab中数组下标是logical,如何处理?
K>> a = 10*ones(1,10); K>> b = [1 56 23 5 6 45 9 7 89 10]; K>> c = b<a c = 1 0 ...
- MongoDB { code: 18, ok: 0.0, errmsg: "auth fails" } 原因
MongoDB出现 { code: 18, ok: 0.0, errmsg: "auth fails" } 错误的原因: 1.账号密码错误 2.账号不属于该数据库
- 腾讯QQ企业邮箱在ruby on rails 框架中的mailer配置
在编写ruby on rails程序时,我们可能会需要用到发送邮件的程序,如果使用gmail进行smtp发送一般问题不大,但很多企业使用的是腾讯QQ企业邮箱.使用该邮箱进行链接时出现各种错误,goog ...
- HTTP/2 对 Web 性能的影响(上)
一.前言 HTTP/2 于 2015 年 5 月正式推出.自诞生以来,它就一直在影响着网络性能最佳实践.在本篇文章中,我们将讨论 HTTP/2 的二进制帧.延迟削减.潜在利弊以及相应的应对措施. 超文 ...
- Test a ; vs Test a( ) ;
一. Test a(); Test a; //前提声明了Test类 前者声明一个返回值为Test,名为a的函数,后者声明了Test类的一个对象(把Test当成int) struct Test{ ...
- 【redis】02string类型和hash类型
Redis的数据类型 Redis主要分为五个数据类型,一个是string,最简单的一个数据类型,hash,list, 还有set集合,还有zset有序集合,这是咱们redis的五种基础类型, 接下 ...
- 【hadoop2.6.0】用C++ 编写mapreduce
hadoop通过hadoop streaming 来实现用非Java语言写的mapreduce代码. 对于一个一点Java都不会的我来说,这真是个天大的好消息. 官网上hadoop streaming ...