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

先来看一个效果图:

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

iChart

二、所需数据(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:.........

PHP里面用ichartjs,ichartjs插件的使用相关推荐

  1. 2013年度中国优秀开源项目

    2013年度中国优秀开源项目 当前63票 ACL 一个通用网络通信库,为C/ C++程序员提供高效.稳定.可靠.功能强大的开发通讯与服务器框架,以及各种常见应用协议的客户端库. 当前70票 Ansj中 ...

  2. JavaScript实现的环形图比较

    1,Highcharts Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习. ...

  3. 利用c#+jquery+ichartjs生成统计图表

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

  4. 阅读分析程序源代码的一些方法(转载整理)

    前言 最近项目组中有较多新成员需要阅读熟悉项目中已有的程序代码,好多成员一时间对项目代码摸不清头绪,这里在网络上收集了相关源代码阅读分析的一些方法,整理于此. 正文 摘自(繁体中文Traditiona ...

  5. java动态生成柱状图3D_在android上动态实现ichartjs的3D柱形图

    ichartjs是一款基于HTML5的图形库.使用纯javascript语言,利用HTML5的canvas标签绘制各式图形.ichartjs可以为web应用提供简单.直观.可交互的体验级图表组件.是w ...

  6. ichartjs android,在android上动态实现ichartjs的3D柱形图

    ichartjs是一款基于HTML5的图形库.使用纯javascript语言,利用HTML5的canvas标签绘制各式图形.ichartjs可以为web应用提供简单.直观.可交互的体验级图表组件.是w ...

  7. js图表报表html5图表,介绍一个!非常简单非常方便!制作图表报表的js库 —— ichartjs 【详细操作】...

    ichartjs是一个国产的图表库,提供各种api,以及多种样式的图表 图表包括:面积图.2d条形图.2d柱状图.3d柱状图.折线图.饼状图等,并且可以组合图形. ichart是一个轻量级的js组件, ...

  8. Android App 图表制作之--ichartJs

    Android流行的今天,很多比较工业,专业的应用也开始了Android化,这其中肯定少不了图表的使用.今天给大家分享下载我最近使用的图表开发的点经历. 先给大家看看用ichartjs制作出图表的效果 ...

  9. 基于HTML5 Canvas的开源图形组件-ichartjs 入门篇

    ichartjs的官方网站为ichartjs(http://www.ichartjs.com/),目前最新版本为ichartjs v1.2 Released ,ichartjs的官方介绍: ichar ...

  10. android图表ichartjs

    android之ichartjs图表 1.http://www.ichartjs.com    pdf下载:http://download.csdn.net/detail/menglele1314/8 ...

最新文章

  1. 最新综述:激光雷达感知深度的域适应方法
  2. ios第三方库和工具类
  3. big endian and little endian
  4. ACM学习历程—HDU2476 String painter(动态规划)
  5. Windows dos 在某个目录下的所有文件中查找包含某个字符串的文件
  6. 解锁云原生 AI 技能|在 Kubernetes 上构建机器学习系统
  7. 计算机无法找到实达打印机,实达打印机使用方法教程
  8. 论文格式——合适【CSDN】发文
  9. 【bzoj2761】【JLOI2011】【不反复数字】【平衡树】
  10. Windows微秒级定时方法
  11. Python 3.10 明年发布,看看都有哪些 PEP ?
  12. 20210314:力扣第 232 场周赛
  13. 枚举类型的定义和应用
  14. leetcode 栈 二叉树的前向遍历
  15. AcrelEMS-IDC综合能效管理系统在某数据中心的应用
  16. excel打开密码忘记了_Excel工作表密码忘记了怎么办?
  17. 安装Oracle XE 18c
  18. IIS发生意外错误0x8ffe2740 IIS不…
  19. Git之版本回退与前进
  20. UTF-8编码下\u7528\u6237转换为中文汉字

热门文章

  1. 如何把图片与压缩包合并成可改后缀名的图片文件及原理
  2. 英文论文写作LaTeX模板
  3. 注册测绘师学习笔记(一)
  4. ISO 7064:1983.MOD11-2校验码计算法(身份证18位效验码计算)
  5. 电路方案分析(一)智能手机FM发射器原理图及方案分析
  6. VS2010的详细安装
  7. 第三章 进化算法之遗传算法及其应用
  8. 用proteus进行一位全加器/减法器的设计与验证
  9. 前端测试框架Jest系列教程 -- Matchers(匹配器)
  10. OpenGL 编程指南(第八版)学习笔记——1 OpenGL概述