自制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中判断字符串中相同字符的个数
public static int countStr(String str1, String str2) { int counter=0; if (str1.indexOf(str2) == -1) ...
CentOS 7 时区设置
设置时区同样, 在 CentOS 7 中, 引入了一个叫 timedatectl 的设置设置程序. 用法很简单: # timedatectl # 查看系统时间方面的各种状态 $timedatectl ...
js截取文件名
str = 'C:\fakepath\ll.doc'; str.substring(str.lastIndexOf("\\")+1,str.lastIndexOf(".& ...
php5.6之后的版本使用curl以＠+文件名的方式上传文件无效的解决版本
使用curl上传文件使用file=@文件路径的方式,在php5.6以后的版本中无法使用了官方文档给出明确解释如果需要支持的话,可以将CURLOPT_SAFE_UPLOAD设置为false 或者使用 ...
C#抓取页面时候，获取页面跳转后的地址
static string fanhuiurl(string cahxunurl) { string url = ""; HttpWebRequest req = (HttpWeb ...
parted
1.选择分区表 sudo parted -s /dev/sdXX mklabel gpt 2.创建分区 sudo parted -s -- /dev/sdX mkpart primary 0 -1s ...
linux 终端相关
echo cd ~/桌面 >> .bashrc 将终端默认路径设为桌面 -/.bashrc./etc/bash.bashrc./etc/profile这几个文件.这些文件的的作用时机:/e ...
小师妹问 easyUI mergeCells 行合并后表头和内容对不齐
公司来了一个做easyUI的妹子,恰好那妹子是和我一个学校的,有一天下班妹子在超时买东西正好巧遇,然后妹子就问了问题,随便说手机卡需要我帮忙刷机,然后就问手机买了多久, 多少钱,刚买的时候好用不,然后 ...
转：WebDriver(Selenium2) 处理可能存在的JS弹出框
在自动化测试过程中,有些情况下我们会遇到一些潜在的Javascript弹出框.(即某些条件下才会出现,不是固定出现),然后如果当这种弹出框出现,我们没有加以处理,WebDriver将无法进行下一步的操 ...
android5.0----SVG
SVG ----scalable vector Graphics 可缩放矢量图形 android L 即android 5.0的新特性. 1,SVG是干什么的? 可缩放矢量图形是基于可扩展标记语言(标 ...

自制ichartjs饼图

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

随机推荐

热门专题