PHP里面用ichartjs,ichartjs插件的使用

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

先来看一个效果图:

6b9fb2ec801cbfc7a58276f185b12ead.png

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

428d49fc4105ffc658386c627807008f.png

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:.........

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值