项目中可能会用到饼状图、柱状图、环形图等，ichartjs是一个很不错的插件，体量小，只需引入ichart.1.2.1.min.js即可满足基础需求，github下载地址是：https://github.com/wanghetommy/ichartjs

先来看一个效果图：

一、引入ichart.1.2.1.min.js及jquery：

  1. <head>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3.     <title>iChart</title>
  4.     <meta charset="utf-8" />
  5.     <script src="scripts/ichart.1.2.1.min.js"></script>
  6.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  7. </head>

二、所需数据（json数组）：

  1. var data = [
  2.     { name: 'UC浏览器', value: 40.0, color: '#4572a7' },
  3.     { name: 'QQ浏览器', value: 37.1, color: '#aa4643' },
  4.     { name: '欧朋浏览器', value: 13.8, color: '#89a54e' },
  5.     { name: '百度浏览器', value: 1.6, color: '#80699b' },
  6.     { name: '海豚浏览器', value: 1.4, color: '#92a8cd' },
  7.     { name: '天天浏览器', value: 1.2, color: '#db843d' },
  8.     { name: '其他', value: 4.9, color: '#a47d7c' }
  9. ];

三、创建iChart对象（本例中使用2D环形图：iChart.Donut2D）：

  1. var chart = new iChart.Donut2D({
  2.                 render: 'canvasDiv',                //绑定的标签id
  3.                 data: data,                         //数据
  4.                 title: {                            //标题
  5.                     text: '2012年第3季度中国第三方手机浏览器市场份额',
  6.                     color: '#3e576f'
  7.                 },
  8.                 footnote: {                         //页脚
  9.                     text: 'ichartjs.com',
  10.                     color: '#486c8f',
  11.                     fontsize: 11,
  12.                     padding: '0 38'
  13.                 },
  14.                 center: {                           //环形图中间的文本
  15.                     text: '90%',
  16.                     color: '#3e576f',
  17.                     shadow: true,
  18.                     shadow_blur: 2,
  19.                     shadow_color: '#557797',
  20.                     shadow_offsetx: 0,
  21.                     shadow_offsety: 0,
  22.                     fontsize: 40
  23.                 },
  24.                 sub_option: {
  25.                     label: {                        //标注
  26.                         background_color: null,
  27.                         sign: true,                //设置启用label的小图标
  28.                         padding: '0 4',
  29.                         border: {
  30.                             enable: false,
  31.                             color: '#666666'
  32.                         },
  33.                         fontsize: 15,
  34.                         fontweight: 600,
  35.                         color: '#4572a7'
  36.                     },
  37.                     border: {
  38.                         width: 2,
  39.                         color: '#ffffff'
  40.                     }
  41.                 },
  42.                 shadow: true,                       //开启引用
  43.                 shadow_blur: 6,
  44.                 shadow_color: '#aaaaaa',
  45.                 shadow_offsetx: 0,
  46.                 shadow_offsety: 0,
  47.                 background_color: '#fefefe',
  48.                 offset_angle: -120,                 //逆时针偏移120度
  49.                 showpercent: false,                 //关闭百分比
  50.                 decimalsnum: 2,                     //小数点位数
  51.                 width: 800,
  52.                 height: 400,
  53.                 radius: 120
  54.             });

四、开启绘图：

  1. chart.draw();

完整代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>iChart</title>
  6.     <meta charset="utf-8" />
  7.     <script src="scripts/ichart.1.2.1.min.js"></script>
  8.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  9. </head>
  10. <body>
  11.     <div id="canvasDiv" style="border:1px solid blue">
  12.  
  13.     </div>
  14.     <script>
  15.         $(function () {
  16.  
  17.             var data = [
  18.                         { name: 'UC浏览器', value: 40.0, color: '#4572a7' },
  19. 				        	{ name: 'QQ浏览器', value: 37.1, color: '#aa4643' },
  20. 				        	{ name: '欧朋浏览器', value: 13.8, color: '#89a54e' },
  21. 				        	{ name: '百度浏览器', value: 1.6, color: '#80699b' },
  22. 				        	{ name: '海豚浏览器', value: 1.4, color: '#92a8cd' },
  23. 				        	{ name: '天天浏览器', value: 1.2, color: '#db843d' },
  24. 				        	{ name: '其他', value: 4.9, color: '#a47d7c' }
  25.             ];
  26.  
  27.             var chart = new iChart.Donut2D({
  28.                 render: 'canvasDiv',                //绑定的标签id
  29.                 data: data,                         //数据
  30.                 title: {                            //标题
  31.                     text: '2012年第3季度中国第三方手机浏览器市场份额',
  32.                     color: '#3e576f'
  33.                 },
  34.                 footnote: {                         //页脚
  35.                     text: 'ichartjs.com',
  36.                     color: '#486c8f',
  37.                     fontsize: 11,
  38.                     padding: '0 38'
  39.                 },
  40.                 center: {                           //环形图中间的文本
  41.                     text: '90%',
  42.                     color: '#3e576f',
  43.                     shadow: true,
  44.                     shadow_blur: 2,
  45.                     shadow_color: '#557797',
  46.                     shadow_offsetx: 0,
  47.                     shadow_offsety: 0,
  48.                     fontsize: 40
  49.                 },
  50.                 sub_option: {
  51.                     label: {                        //标注
  52.                         background_color: null,
  53.                         sign: true,                //设置启用label的小图标
  54.                         padding: '0 4',
  55.                         border: {
  56.                             enable: false,
  57.                             color: '#666666'
  58.                         },
  59.                         fontsize: 15,
  60.                         fontweight: 600,
  61.                         color: '#4572a7'
  62.                     },
  63.                     border: {
  64.                         width: 2,
  65.                         color: '#ffffff'
  66.                     }
  67.                 },
  68.                 shadow: true,                       //开启引用
  69.                 shadow_blur: 6,
  70.                 shadow_color: '#aaaaaa',
  71.                 shadow_offsetx: 0,
  72.                 shadow_offsety: 0,
  73.                 background_color: '#fefefe',
  74.                 offset_angle: -120,                 //逆时针偏移120度
  75.                 showpercent: false,                 //关闭百分比
  76.                 decimalsnum: 2,                     //小数点位数
  77.                 width: 800,
  78.                 height: 400,
  79.                 radius: 120
  80.             });
  81.  
  82.             chart.draw();
  83.         })
  84.     </script>
  85. </body>
  86. </html>

转载于：https://blog.csdn.net/qq_39306736

ichartjs插件的使用的更多相关文章

  1. 如何在我们项目中利用开源的图表（js chart）

            最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长!       这篇随笔主要为介绍chart在项目中的运用,因为在我们看到一些开源的chart时候,是使 ...

  2. js chart

    如何在我们项目中利用开源的图表(js chart)   最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长! 这篇随笔主要为介绍chart在项目中的运用,因为在我们看到一 ...

  3. 前端技术-js插件

    学习良好的规范,培养良好的书写习惯,苦练基本功才能快速成长. http://www.cnblogs.com/cssbbs/category/758479.html 常用插件 插件名 使用范围 说明 官 ...

  4. 转：几款免费的图表js插件

    1,ichartjs(国产)(http://www.ichartjs.com/)  ===============强烈推荐ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业 ...

  5. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  6. Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告

    最近在做基于jenkins ant  junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...

  7. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  8. solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件

    昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...

  9. 使用Visual Studio SDK制作GLSL词法着色插件

    使用Visual Studio SDK制作GLSL词法着色插件 我们在Visual Studio上开发OpenGL ES项目时,避免不了写Shader.这时在vs里直接编辑shader就会显得很方便. ...

随机推荐

  1. CMake将生成的可执行文件保存到其他目录

    在运行一些程序的时候,我们一般会把数据文件放在其他位置.而当在修改程序时,需要不断的修改代码,编译,执行.每次编译之后,都得将可执行文件复制到数据文件的目录. 这一问题有两种解决方法,一是直接在数据目 ...

  2. Web服务器-并发服务器-Epoll（3.4.5）

    @ 目录 1.介绍 2.代码 关于作者 1.介绍 epoll是一种解决方案,nginx就是用的这个 中心思想:不要再使用多进程,多线程了,使用单进程,单线程去实现并发 在上面博客实现的代码中使用过的轮 ...

  3. 【基础】Linux系统的运行级别

    1.系统运行级别的配置文件 什么是运行级呢?简单的说,运行级就是操作系统当前正在运行的功能级别. 它让一些程序在一个级别启动,而另外一个级别的时候不启动. Linux系统的有效登录模式有0~9共十种, ...

  4. 01 . GitLab简介及环境部署

    GitLab简介 最初,该产品名为GitLab,是完全免费的开源软件,按照MIT许可证分发. 2013年7月,产品被拆分为:GitLabCE(社区版)和GitLabEE(企业版),当时,GitLabC ...

  5. C#——时间之不同国家的显示格式

    对于时间的显示,不同的地方有不同的时间格式,代码如下: public class Common_DateFormat { public Common_DateFormat() { // // TODO ...

  6. 10分钟带你入门git到github

    git的产生背景 开局先来一个故事吧,故事看完如果不想看枯燥无味的指令,没关系我已经把这篇文章的内容录制成了一个视频,点击文末阅读原文就可以观看.或者说你已经熟练掌握git的使用了,可以直接跳到总结部 ...

  7. Win10下mysql5.5和mysql8.0.19共存

    Win10下mysql5.5和mysql8.0.19共存 需求:由于之前做的项目用的是mysql5.5,而新接的项目指定用mysql8,需要myql5..5和8同时存在运行. 前提:电脑已经安装mys ...

  8. 对于home主页的切换处理

    经过测试,发现,在home首页的时候,滑动到某一个位置的时候,如果再点击tabbar中的"购物车"."分类"或者"我的"的时候,再点击到首页 ...

  9. Spark学习进度-Transformation算子

    Transformation算子 intersection 交集 /* 交集 */ @Test def intersection(): Unit ={ val rdd1=sc.parallelize( ...

  10. linux系统修改不成功无法修改密码

    一.问题描述 新上架的浪潮服务器使用装机平台进行统一安装,安装完成后修改用户密码时统一无法修改,使用root账户无法修改其他用户密码,自身根密码也无法修改成功,报错如下 Changing passwo ...