自制ichartjs饼图

饼图:2个数据:

<!DOCTYPE html>

<html>

  <head>

  	<meta charset="UTF-8" />

    <title>ichart.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript" src="ichart/ichart.1.2.min.js"></script>

	<script type="text/javascript">

		$(function(){

				var data = [

				        	{name : 'A',value : 86/(86+136+220), Count: 86,color:'#750000'},

				        	{name : 'B',value : 136/(86+136+220),Count: 136,color:'#003d79'},

				        	{name : 'C',value : 200/(86+136+220),Count: 200,color:'#969696'}

			        	];

				var chart = new iChart.Pie2D({

					offset_angle:-100,

					render : 'canvasDiv',

					title:{

						text:'Defect Priority',

						color:'#000000',

						height:40,

						//border:{

							//enable:false,

							//width:[0,0,2,0],

							//color:'#FFFFFF'

						//}

					},

					padding:'2 10',

					footnote:{

						//text:'StatCounter Global Stats,design by ichartjs',

						color:'#e0e5e8',

						height:30,

						border:{

							enable:true,

							width:[2,0,0,0],

							color:'#343b3e'

						}

					},

					width : 600,

					height : 400,

					data:data,

					shadow:true,

					shadow_color:'#15353a',

					shadow_blur:8,

					background_color : '#FFFFFF',

					gradient:true,//开启渐变

					color_factor:0.28,

					gradient_mode:'RadialGradientOutIn',

					showpercent:true,

					decimalsnum:0,

					/*legend:{

						offsetx:50,

						offsety:-50,

						enable:true,

						padding:100,

						color:'#000000',

						border:{

							width:[0,0,0,0],

							color:'#343b3e'

						},

						background_color : null,

					},*/

					sub_option:{

						border:{

							enable:false

						},

						label : {

							sign:true,

							fontsize:14,

							color:'#000000'

						},

						listeners:{

							parseText:function(d, t){

								return d.get('name')+"("+ d.get('Count')+")"+"	"+d.get('value');

							}

						}

					},

					//border:{

						//width:[0,20,0,20],

						//color:'#1e2223'

					//}

				});		

				chart.bound(0);

			});

	</script>

  </head>

  <body>

  	<div id='canvasDiv'></div>

  </body>

</html>

自制堆积百分比:

<!DOCTYPE html>

<html>

  <head>

  	<meta charset="UTF-8" />

    <title>ichart.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript" src="ichart/ichart.1.2.min.js"></script>

	<script type="text/javascript">

		$(function(){

			var data = [

						{

							name : 'Completed',

							value:[10/(10+20+30+40),20/(10+20+30+40),10/(10+20+30+40),20/(20+15+35+30),30/(30+25+15+30)],

							color:'#919191'

						},

			         	{

			         		name : 'Progress',

			         		value:[20/(10+20+30+40),10/(10+20+30+40),30/(10+20+30+40),15/(20+15+35+30),25/(30+25+15+30)],

			         		color:'#00bb00'

			         	},

						{

							name : 'Delay',

							value:[30/(10+20+30+40),30/(10+20+30+40),40/(10+20+30+40),35/(20+15+35+30),15/(30+25+15+30)],

							color:'#FF0000'

						},

			         	{

			         		name : 'Pending',

			         		value:[40/(10+20+30+40),40/(10+20+30+40),20/(10+20+30+40),30/(20+15+35+30),30/(30+25+15+30)],

			         		color:'#f0f0f0'

			         	}

			         ];

			var chart = new iChart.BarStacked2D({

					render : 'canvasDiv',

					data: data,

					labels:["DTV","4K5K","HDTV","MFM","Monitor"],

					title : {

						//text:'Total U.S Retail Software Revenue',

						width:400,

						align:'left',

						background_color : '#495998',

						color:'#c0c8e7'

					},

					subtitle : {

						//text:'Showing Jan-Sep Share,2012 Estimated',

						width:280,

						height:20,

						fontsize:12,

						align:'left',

						color:'#c0c8e7'

					},

					padding:10,

					//footnote : '数据来源：互联网',

					width : 800,

					color:'#000000',

					percent:true,

					height : 400,

					bar_height:20,

					background_color : '#ffffff',

					shadow : true,

					shadow_blur : 2,

					shadow_color : '#aaaaaa',

					shadow_offsetx : 1,

					shadow_offsety : 0,

					sub_option:{

						label:{color:'#ffffff',fontsize:12,fontweight:600},

						border : {

							width : 2,

							color : '#d3d4f0'

						}

					},

					label:{color:'#000000',fontsize:12,fontweight:600},

					showpercent:true,

					decimalsnum:0,

					legend:{

						enable:true,

						background_color : null,

						line_height:25,

						color:'#000000',

						fontsize:12,

						fontweight:600,

						offsetx: 20,

						border : {

							enable : false

						}

					},

					coordinate:{

						background_color : 0,

						axis : {

							color : '#c0c8e7',

							width : 0

						},

						scale:[{

							 position:'bottom',

							 scale_enable : false,

							 start_scale:0,

							 scale_space:20,

							 end_scale:100,

							 label:{color:'#000000',fontsize:11,fontweight:600},

							 listeners:{

								parseText:function(t,x,y){

									return {text:t}

								}

							 }

						}],

						width:600,

						height:260

					}

			});

			//利用自定义组件构造左侧说明文本

			chart.plugin(new iChart.Custom({

					drawFn:function(){

						//计算位置

						var coo = chart.getCoordinate(),

							x = coo.get('originx'),

							y = coo.get('originy'),

							h = coo.height;

						//在左下侧的位置，渲染一个单位的文字

						chart.target.textAlign('start')

						.textBaseline('bottom')

						.textFont('600 11px Verdana')

						//.fillText('Billions',x-20,y+h+30,false,'#a8b2d7');

					}

			}));

			chart.draw();

		});

	</script>

  </head>

  <body>

  	<div id='canvasDiv'></div>

  </body>

</html>

自制ichartjs饼图的更多相关文章

关于iChartjs在移动端提示框tip显示不正常的解决方法
最近项目需要使用手机图表,但是找了很久都没找到专门为移动端开发的图表,只能找一些能兼容移动端的图表控件,今天就讲讲关于iChartjs这个图形库的一点问题. 问题 iChartjs的提示框tip的显示 ...
使用ichartjs生成图表
官网:http://www.ichartjs.com/ ichartjs 是一款基于HTML5的图形库.使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形. ichartj ...
读取数据库数据，并将数据整合成3D饼图在jsp中显示
首先我将生成饼图的方法独立写成一个PieChar.java类,详细代码如下:(数据库需要自己建,如有需要的话) import java.io.IOException; import java.sql. ...
echarts饼图
1.添加点击事件并跳转到不同的页面 // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist/' ...
[Unity3D]自制UnityForAndroid二维码扫描插件
一周左右终于将二维码生成和扫描功能给实现了,终于能舒缓一口气了,从一开始的疑惑为啥不同的扫码客户端为啥扫出来的效果不同?通用的扫描器扫出来就是一个下载APK,自制的扫描器扫出来是想要的有效信息,然后分 ...
.NET中使用APlayer组件自制播放器
目录说明 APlayer介绍 APlayer具备功能 APlayer使用自制播放器Demo 未完成工作源码下载说明由于需求原因,需要在项目中(桌面程序)集成一个在线播放视频的功能.大概要具备 ...
Html5绘制饼图统计图
这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...
IOS 绘制圆饼图简单实现的代码有注释
今天为大家带来IOS 绘图中圆饼的实现 .h文件 #import <UIKit/UIKit.h> @interface ZXCircle : UIView @end .m文件 #impor ...
Qt 之饼图
Qt 库由许多模块组成,其中的 Qt Charts,包含了一系列图表组件. 1 饼图 (pie chart) 1.1 Charts 模块 .pro 中添加如下语句: QT += charts 头文 ...

随机推荐

Java学习笔记之[ 利用扫描仪Scanner进行数据输入 ]
/*********数据的输入********//**利用扫描仪Scanner进行数据输入怎么使用扫描仪Scanner *1.放在类声明之前,引入扫描仪 import java.util.Scann ...
Python实战：爬虫的基础
网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕 ...
GitHub这么火，程序员你不学学吗？超简单入门教程【转载】
本GitHub教程旨在能够帮助大家快速入门学习使用GitHub. 本文章由做全栈攻城狮-写代码也要读书,爱全栈,更爱生活.原创.如有转载,请注明出处. GitHub是什么? GitHub首先是个分布式 ...
PHP中GD库安装
安装gd库扩展不能像其他扩展安装一样,直接./configure --prefix=/xxx 还需要激活png,jpeg,字库等支持 ./configure --prefix=/xxx --with- ...
POJ 3597 种类数数学+递推
http://poj.org/problem?id=3597 题目大意:把一个正多边形分成数个三角形或者四边形,问有多少种方案. 思路:http://www.cnblogs.com/Ritchie/p ...
asp.net html table to DataTable
添加引用 http://htmlagilitypack.codeplex.com/downloads/get/437941 protected void Export(string content,s ...
socket小解
要理解socket,首先得理解TCP/IP协议族, TCP/IP (Transmission Control Protocol/Internet Protocol)传输控制协议/网间协议定义: TC ...
Tree Cutting
Tree Cutting Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/131072 K (Java/Others) Prob ...
dedecms 标签的基本用法
1.关键描述调用标签: <meta name="keywords" content="{:fieldname='keywords'/}"> < ...
Firebase 相关
谷歌在 2016年 I/O 大会上推出了 Firebase 的新版本.Firebase 平台提供了为移动端(iOS和Android)和 Web 端创建后端架构的完整解决方案. 从一开始的移动后端即服务 ...

自制ichartjs饼图

自制ichartjs饼图的更多相关文章

随机推荐

热门专题