原生js饼图、环形图、环形渐变(原创)

所属分类:UI-图表

 19348  226  查看评论 (5)
分享到微信朋友圈
X
原生js饼图、环形图、环形渐变(原创) ie兼容9

更新时间:2019/7/8 下午4:43:42

更新说明:修改了一些bug,增加了一些样式配置,如图例


发布时间:2019-07-07 23:34:45

调用方法:

drawCircle()

参数列表:

  • id: 绑定生成图表的元素的id

  • data: 展示数据

  • name: 数据列表名称,中间label显示

  • value: 数据,必填

  • colors:[start, end] 渐变颜色,两个数值必须为rgb格式

  • radius: 圆环半径,可以是 number,string,array,比如 100,'100', '50%', [50], ['50%'], ['50%', '40%'],为数组时,第二个元素表示内部圆半径,内部圆半径默认为外部圆半径*0.8

  • center: 圆环中心位置坐标,默认['50%', '50%'],可以是具体数值,比如[100, 100]

实例方法:

update()

用于更新数据,传入参数为 data

相关插件-图表

AmChart使用例子

AmChart统计图插件使用例子
  图表
 34621  397

jQuery响应式表格插件ReStable

jQuery restable是一个非常简单轻量级(~ 1KB)的jQuery插件,它可以将表格在指定的响应式断点时,使表格结构切换为无序列表结构,以适应在小屏幕设备中显示表格数据。
  图表
 33149  316

支持ie8的圆形统计比例图

动态统计,支持ie8以及以上版本的ie浏览器,其他的浏览器
  图表
 53517  421

ets常用的数据统计图(原创)

利用ets,制作常用的数据统计图
  图表
 41238  402

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    悠悠的fish 0
    2019/7/9 9:15:19

    都已经有了那么强大的echarts插件了,比你这个完善太多了,不过你原创的东西自己学习了也很不错的。

        好人中的恶魔0
        2019/7/11 16:58:22
        我这就是echarts没有实现的哦,不过我这个比较简单,是根据我们公司实际项目写的,其他情况需要修改,echarts目前没有这种渐变方式
        好人中的恶魔0
        2019/7/11 17:04:19
        也有可能是我没有完全掌握echarts,没有找到方法吧
        卑鄙的我0
        2019/8/26 17:56:32
        请问怎么修改百分比哪里的颜色
        好人中的恶魔0
        2019/9/17 16:16:58
        不好意思啊,一直没看这个,参数列表有个 labelStyle属性,可以设置color
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复