在好例子网,分享、交流、成长!
您当前所在位置:首页CSS 开发实例HTML基础 → ichartjs图表之简单饼图实现

ichartjs图表之简单饼图实现

HTML基础

下载此实例
  • 开发语言:CSS
  • 实例大小:4.15KB
  • 下载次数:15
  • 浏览次数:495
  • 发布时间:2017-10-26
  • 实例类别:HTML基础
  • 发 布 人:wxp123
  • 文件格式:.html
  • 所需积分:1
 相关标签: ichartjs 图表 饼图

实例介绍

【实例简介】ichartjs图表之简单饼图实现
【实例截图】

from clipboard
【核心代码】

饼图:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>ichartjs designer</title>
<script src='http://www.ichartjs.com/ichart.latest.min.js'></script>
<script type='text/javascript'>
$(function(){
      var chart = iChart.create({
            render:"ichart-render",
            width:800,
            height:400,
            background_color:"#fefefe",
            gradient:false,
            color_factor:0.2,
            border:{
                  color:"BCBCBC",
                  width:1
            },
            align:"center",
            offsetx:0,
            offsety:0,
            sub_option:{
                  border:{
                        color:"#BCBCBC",
                        width:1
                  },
                  label:{
                        fontweight:500,
                        fontsize:11,
                        color:"#4572a7",
                        sign:"square",
                        sign_size:12,
                        border:{
                              color:"#BCBCBC",
                              width:1
                        },
                        background_color:"#fefefe"
                  }
            },
            shadow:true,
            shadow_color:"#666666",
            shadow_blur:2,
            showpercent:false,
            column_width:"70%",
            bar_height:"70%",
            radius:"100%",
            title:{
                  text:"测试ichartjs图表",
                  color:"#111111",
                  fontsize:20,
                  font:"微软雅黑",
                  textAlign:"center",
                  height:30,
                  offsetx:0,
                  offsety:0
            },
            subtitle:{
                  text:"MyTest",
                  color:"#111111",
                  fontsize:16,
                  font:"微软雅黑",
                  textAlign:"center",
                  height:20,
                  offsetx:0,
                  offsety:0
            },
            footnote:{
                  text:"all Data To Test",
                  color:"#111111",
                  fontsize:12,
                  font:"微软雅黑",
                  textAlign:"right",
                  height:20,
                  offsetx:0,
                  offsety:0
            },
            legend:{
                  enable:false,
                  background_color:"#fefefe",
                  color:"#333333",
                  fontsize:12,
                  border:{
                        color:"#BCBCBC",
                        width:1
                  },
                  column:1,
                  align:"right",
                  valign:"center",
                  offsetx:0,
                  offsety:0
            },
            coordinate:{
                  width:"80%",
                  height:"84%",
                  background_color:"#ffffff",
                  axis:{
                        color:"#a5acb8",
                        width:[1,"",1,""]
                  },
                  grid_color:"#d9d9d9",
                  label:{
                        fontweight:500,
                        color:"#666666",
                        fontsize:11
                  }
            },
            label:{
                  fontweight:500,
                  color:"#666666",
                  fontsize:11
            },
            type:"pie3d",
            data:[
                  {
                  name:"上海某公司",
                  value:20,
                  color:"#4572a7"
            },{
                  name:"成都某公司",
                  value:30,
                  color:"#aa4643"
            },{
                  name:"广东某公司",
                  value:40,
                  color:"#89a54e"
            },{
                  name:"深圳某公司",
                  value:50,
                  color:"#000000"
            }
            ]
      });
      chart.draw();
});
</script>
</head>
<body style='background-color:#244c74;'>
<div id='ichart-render'></div>
</body>
</html>

标签: ichartjs 图表 饼图

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警