自制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 头文 ...
随机推荐
- if语句，函数function
1.语句 一般分为顺序,分支和循环语句. if是分支语句 格式1:if(){} 若满足就进入花括号,若不满足就跳过 格式2:if(){}else(){}二选一.若if满足则else一定不执行,反之则 ...
- sql server基础学习之引号
create table #(code varchar(20),value int)declare @sql varchar(200) set @sql='insert into # select ' ...
- As3.0 视频缓冲、下载总结
来源:http://www.cuplayer.com/player/PlayerCodeAs/2012/0913404.html 利用NetStream的以下属性: bufferTime — 缓冲区大 ...
- iOS申请真机调试证书 -- 图文详解
请参考这篇文章 : http://ios.9tech.cn/news/2013/1011/33117.html 这篇文章完全就是对的,主要是最后一步 “配置Xcode" 图没有配全,也配得不 ...
- asp.net textbox控件readonly为true时，后台取值的问题
如题,在后台通过textbox.Text方式取值为空,不论你默认值是否是空,如想要获得,需通过request.Form[""]的方式.
- 路由器wan口连接不上的问题
路由器:tp-link:系统:win8.1:网络类型:PPPoE 克隆“当前管理PC的MAC地址”后,无法连接,将网线直接连到电脑上可以连接,所以问题一定出在路由上,经过不断探索发现问题所在,通过命令 ...
- git push origin master 报错 remote rejected] master -> master (branch is currently checked out)
解决办法: 977down vote You can simply convert your remote repository to bare repository (there is no wor ...
- VJ16216/RMQ/线段树单点更新
题目链接 /* 单点更新,用RMQ维护最大值,add对c[i]修改,或加,或减. 求[l,r]的和,用sum(r)-sum(l-1).即可. */ #include<cmath> #inc ...
- java 子类与父类继承关系
People.java public class People { int age,leg = 2,hand = 2; protected void showPeopleMess() { System ...
- hdu_5085_Counting problem(莫队分块思想)
题目连接:hdu_5085_Counting problem 题意:给你一个计算公式,然后给你一个区间,问这个区间内满足条件的数有多少个 题解:由于这个公式比较特殊,具有可加性,我们考虑讲一个数分为两 ...