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

先来看一个效果图：

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

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>iChart</title>

    <meta charset="utf-8" />

    <script src="scripts/ichart.1.2.1.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

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

var data = [

    { name: 'UC浏览器', value: 40.0, color: '#4572a7' },

    { name: 'QQ浏览器', value: 37.1, color: '#aa4643' },

    { name: '欧朋浏览器', value: 13.8, color: '#89a54e' },

    { name: '百度浏览器', value: 1.6, color: '#80699b' },

    { name: '海豚浏览器', value: 1.4, color: '#92a8cd' },

    { name: '天天浏览器', value: 1.2, color: '#db843d' },

    { name: '其他', value: 4.9, color: '#a47d7c' }

];

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

var chart = new iChart.Donut2D({

                render: 'canvasDiv',                //绑定的标签id

                data: data,                         //数据

                title: {                            //标题

                    text: '2012年第3季度中国第三方手机浏览器市场份额',

                    color: '#3e576f'

                },

                footnote: {                         //页脚

                    text: 'ichartjs.com',

                    color: '#486c8f',

                    fontsize: 11,

                    padding: '0 38'

                },

                center: {                           //环形图中间的文本

                    text: '90%',

                    color: '#3e576f',

                    shadow: true,

                    shadow_blur: 2,

                    shadow_color: '#557797',

                    shadow_offsetx: 0,

                    shadow_offsety: 0,

                    fontsize: 40

                },

                sub_option: {

                    label: {                        //标注

                        background_color: null,

                        sign: true,                //设置启用label的小图标

                        padding: '0 4',

                        border: {

                            enable: false,

                            color: '#666666'

                        },

                        fontsize: 15,

                        fontweight: 600,

                        color: '#4572a7'

                    },

                    border: {

                        width: 2,

                        color: '#ffffff'

                    }

                },

                shadow: true,                       //开启引用

                shadow_blur: 6,

                shadow_color: '#aaaaaa',

                shadow_offsetx: 0,

                shadow_offsety: 0,

                background_color: '#fefefe',

                offset_angle: -120,                 //逆时针偏移120度

                showpercent: false,                 //关闭百分比

                decimalsnum: 2,                     //小数点位数

                width: 800,

                height: 400,

                radius: 120

            });

四、开启绘图：

chart.draw();

完整代码：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>iChart</title>

    <meta charset="utf-8" />

    <script src="scripts/ichart.1.2.1.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<body>

    <div id="canvasDiv" style="border:1px solid blue">

    </div>

    <script>

        $(function () {

            var data = [

                        { name: 'UC浏览器', value: 40.0, color: '#4572a7' },

				        	{ name: 'QQ浏览器', value: 37.1, color: '#aa4643' },

				        	{ name: '欧朋浏览器', value: 13.8, color: '#89a54e' },

				        	{ name: '百度浏览器', value: 1.6, color: '#80699b' },

				        	{ name: '海豚浏览器', value: 1.4, color: '#92a8cd' },

				        	{ name: '天天浏览器', value: 1.2, color: '#db843d' },

				        	{ name: '其他', value: 4.9, color: '#a47d7c' }

            ];

            var chart = new iChart.Donut2D({

                render: 'canvasDiv',                //绑定的标签id

                data: data,                         //数据

                title: {                            //标题

                    text: '2012年第3季度中国第三方手机浏览器市场份额',

                    color: '#3e576f'

                },

                footnote: {                         //页脚

                    text: 'ichartjs.com',

                    color: '#486c8f',

                    fontsize: 11,

                    padding: '0 38'

                },

                center: {                           //环形图中间的文本

                    text: '90%',

                    color: '#3e576f',

                    shadow: true,

                    shadow_blur: 2,

                    shadow_color: '#557797',

                    shadow_offsetx: 0,

                    shadow_offsety: 0,

                    fontsize: 40

                },

                sub_option: {

                    label: {                        //标注

                        background_color: null,

                        sign: true,                //设置启用label的小图标

                        padding: '0 4',

                        border: {

                            enable: false,

                            color: '#666666'

                        },

                        fontsize: 15,

                        fontweight: 600,

                        color: '#4572a7'

                    },

                    border: {

                        width: 2,

                        color: '#ffffff'

                    }

                },

                shadow: true,                       //开启引用

                shadow_blur: 6,

                shadow_color: '#aaaaaa',

                shadow_offsetx: 0,

                shadow_offsety: 0,

                background_color: '#fefefe',

                offset_angle: -120,                 //逆时针偏移120度

                showpercent: false,                 //关闭百分比

                decimalsnum: 2,                     //小数点位数

                width: 800,

                height: 400,

                radius: 120

            });

            chart.draw();

        })

    </script>

</body>

</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. Spark性能优化指南

    1 Spark开发调优篇 原则一:避免创建重复的RDD 原则二:尽可能复用同一个RDD 原则三:对多次使用的RDD进行持久化 原则四:尽量避免使用shuffle类算子 因此在我们的开发过程中,能避免则 ...

  2. Web常用编码以及攻击绕过笔记

    一.URL编码形式:"%"加上ASCII码(先将字符转换为两位ASCII码,再转为16进制),其中加号"+"在URL编码中和"%20"表示一 ...

  3. 点击劫持（Iframe clickJack）练习

    实验内容: 寻找一个合适的网站放入到iframe标签中.实验中测试了包括知网首页及登录界面.淘宝首页及登录界面,百度首页,微信下载界面.发现淘宝登录界面无法放入,会直接跳转到淘宝真实的登录界面,其他的 ...

  4. Redis入门指导

    前言 本文提供全网最完整的Redis入门指导教程,下面我们从下载Redis安装包开始,一步一步的学习使用. 下载Redis 官网提供的Redis安装包是服务于Linux的,而我们需要在Window下使 ...

  5. nodejs+express+mongodb 快速接口开发

    nodejs+mongodb+express API快速生成 使用说明 安装 $ npm install duzq-quick-mongo 建立mongodb数据模型 const mongoose = ...

  6. 其实吧，LRU也就那么回事。

    这是why哥的第 81 篇原创文章 你面试的时候遇见过LRU吗? LRU 算法,全称是Least Recently Used. 翻译过来就是最近最少使用算法. 这个算法的思想就是:如果一个数据在最近一 ...

  7. 基于docker,consul,consul-template, registrator, nginx服务注册发现集群

      介绍 该工程主要实现服务的自动注册发现,从而达到提高运维效率,做到服务的自动发现和动态扩展. 服务注册发现 服务启动后自动被发现 动态变更负载均衡 自动伸缩 工具 1.Registrator 这是 ...

  8. java 多线程40个问题汇总（转）

    java 多线程40个问题汇总,自己也记录一份,如有侵权,联系删除 ref from :http://www.cnblogs.com/xrq730/p/5060921.html 1.多线程作用 - 利 ...

  9. struts文件上传拦截器分析

    struts有默认的文件拦截器,一般配置maximumSize就可以了. 知道原理,我们可以写一个类继承它,实现自己的配置上传文件大小的方式.   然后细究页面上传文件的时候,发现了一些问题. act ...

  10. 解决在Filter中读取Request中的流后, 然后再Control中读取不到的做法

    摘要: 大家知道, StringMVC中@RequestBody是读取的流的方式, 如果在之前有读取过流后, 发现就没有了. 我们来看一下核心代码: filter中主要做的事情, 就是来校验请求是否合 ...