自制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 头文 ...

随机推荐

hdu 1020
//自信满满地交上去~~but...超时了 #include <iostream> #include <string.h> #include <stdio.h> u ...
linux 备份文件+sql
sql 1 2 3 rm -f /bak/bak.sql mysqldump --databases nl -uroot -p413121 > /bak/bak.sql curl http:// ...
karma+jasmine自动化测试
1.安装nodejs,进入项目目录 2.安装karma和相关插件 npm install karma --save-dev npm install karma-jasmine karma-chrome ...
Ajax及select级联
cascade.jsp(Test/WebContent/jsp/cascade.jsp): <%@ page language="java" contentType=&quo ...
android cordova h5总结
最近项目替换页面把80%页面替换成h5了. 首页h5页面可以放在android本地.增加访问速度.节省用户流量把服务器上的 js代码压缩成zip格式放在asset目录.当应用安装时候 ...
wpf计时器
wpf应用程序间隔一段时间触发一个事件,代码如下: public MainWindow() { InitializeComponent(); DispatcherTimer timer = new D ...
cakephp 复杂查询
$now = time(); $this->CardTypeInfos->recursive = -1; $conditions = [ 'seller_id'=>SELLER_ID ...
C++调用com控件方法
转载自:http://blog.csdn.net/haijun286972766/article/details/6273414 最近要求做一个C++调用com组件的DEMO.由于自己对C++并无研究 ...
ABI & API
API defines the programning language and function entry point, arguments type, order. ABI defines th ...
oracle 基础使用以及sql语句基础
oracle的安装与卸载要记住数据库口令,适用于sys.system.sysman/dbsnmp等账户,而scott帐号密码默认为tiger, 以oracle 10g来说,scott账户默 ...

自制ichartjs饼图

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

随机推荐

热门专题