项目中可能会用到饼状图、柱状图、环形图等，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. layui的登录页面设计

    主要的结构 先导入layui的主要的js和css等 <html> <head> <meta charset="utf-8"> <title ...

  2. writeup | 你知道php的备份文件吗

    题目地址:https://adworld.xctf.org.cn/task/answer?type=web&number=3&grade=0&id=5064 转载请注明出处作者 ...

  3. Redis缓存穿透和缓存雪崩的面试题解析

    前段时间去摩拜面试,然后,做笔试的时候,遇到了几道Redis面试题目,今天来做个总结.捋一下思路,顺便温习一下之前的知识,如果对您有帮助,左上角点下关注 ! 谢谢 文章目录 缓存穿透 缓存雪崩 大家都 ...

  4. 分析《令人心动的offer2》网友们都在吐槽什么？

    综艺,是我们劳累了一天的放松方式,也是我们饭后的谈资.看着自己喜欢的综艺,时光足够美.而<令人心动的offer >,就是一个不错的综艺选择.有人说它让自己更自卑了,而我觉得挺有意思. &l ...

  5. JavaScript之作用域-作用域链

    作用域 ==> 作用域链   作用域:变量可以其作用的区域(声明定义好一个变量,变量可以在哪些范围内使用) 分类:全局作用域和局部作用域(函数作用域):在js中,目前全局有作用域以及函数可以形成 ...

  6. Spring Cloud 2020.0.0正式发布，再见了Netflix

    目录 ✍前言 版本约定 ✍正文 Spring Cloud版本管理 与Spring Boot版本对应关系 当前支持的版本 阻断式升级(不向下兼容) 1.再见了,Netflix Netflix组件替代方案 ...

  7. 痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU硬件那些事（2.6）- 串行NOR Flash下载算法(MCUXpresso IDE篇)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是MCUXpresso IDE开发环境下i.MXRT的串行NOR Flash下载算法设计. 在i.MXRT硬件那些事系列之<在串行N ...

  8. RxJava +Retrofit 简单使用

    1.添加依赖 compile 'com.squareup.retrofit2:converter-gson:2.3.0' compile 'com.squareup.retrofit2:adapter ...

  9. sql去除重复的几种方法

    所以用这样一句SQL就可以去掉重复项了: select * from msg group by terminal_id; SQL中distinct的用法(四种示例分析) 示例1 select dist ...

  10. mybatis实现MySQL数据库的增删改查之二

    这里直接附上代码: 1 package com.qijian.pojo; 2 3 import org.apache.ibatis.type.Alias; 4 5 6 public class Use ...