基于RaphaelJS编写的Chart报表图

最新推荐文章于 2017-09-06 16:51:00 发布
最新推荐文章于 2017-09-06 16:51:00 发布
阅读量203 收藏
点赞数
分类专栏： 前端技术

基于RaphaelJS编写的线型报表图,暂时只写了简单的线形图表，由于时间和环境关系，后续尝试也几乎搁浅了，不过这算是一种尝试和兴趣吧，

 

查看demo

线形图

柱状图

饼图

源码按F12就能看到，就不贴了，有探讨或想要的可以留言

图片如下，

    

 线形图
 柱状图

 

 

 

 

http://www.goodjs.cn

iteye_12865
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
raphaelJS制作图表、饼图、柱状图、曲线图
04-27
用raphael js 制作图表，里面包含饼图、柱状图、曲线图的实例
用Raphael绘制雷达图（radar chart）
weixin_34273481的博客
11-19 223
首先新建一个项目，当前要先在数据库设置一下。项目说简单也简单，说难也难。要用到Ajax与Raphael类库，不过更多的时候自己舞弄三角函数（做统计这少不了。） 接着删除public下的index.html，并在routes下添加： map.root :abilities#★★★★ # Install the default routes as the lowest pri...
用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（下）
sinolzeng的专栏
12-10 6908
首先，这里有个g.raphael.js的范例文章，可以直接看，我就不转载了： http://www.cnblogs.com/lhb25/archive/2013/01/09/gRaphael-javascript-chart-library.html 好了，接下来我们来试试创建柱状图： 首先导入我们上一篇里面讲到的几个js，记得要按照上面从上到下的顺序导入，因为g.rap
基于jquery+raphael实现的可拖动树形图
08-01
基于jquery+raphael实现（矩形+线条）可拖动的树形图或流程图，支持各种浏览器，适合需按树形结构展示的流程图，可用于工作流，以及信用分险行业的决策流展示
强大的js会图框架raphael-js
mansai的专栏
07-13 8384
官方地址 http://dmitrybaranovskiy.github.io/raphael/ 源码下载地址 https://github.com/DmitryBaranovskiy/raphael英文文档 http://dmitrybaranovskiy.github.io/raphael/reference.html 中文文档 https://lab.yuanwai.wa
barChart-raphaelJS:使用 RaphaelJS 的简单条形图库
06-23
barChart-raphaelJS 使用 RaphaelJS 的简单条形图库 创建简单的条形图 比较视图 横向或纵向模式 悬停值的工具提示 多色支持 横向/纵向模式 配置简单 支持 IE 6+ 安装 git clone ...
raphael.js绘制中国地图 地图绘制方法
10-26
在本文中给大家分享如何使用raphael.js来完成地图交互,raphael.js是一个很小的javascript库，它可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能,需要的朋友可以参考下
Mapael基于raphaeljs用于显示动态矢量地图的jQuery插件
08-10
Mapael - 基于raphael.js用于显示动态矢量地图的jQuery插件
raphaeljs_starter
01-10
raphaeljs_starter.pdf
vue如何集成raphael.js中国地图的方法示例
10-19
最近的数据统计项目中要用到中国地图，也就是在地图上动态的显示某个时间段某个省份地区的统计数据，我们不需要flash，仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作。本文就给大家介绍了关于利用vue集成...
raphael 画单列柱状图
02-25
用raphael 画柱状图，对于一组数据，在其上方显示该数据的名称和柱状图的各个数值
raphael饼图柱状图
09-14
<script type="text/javascript"> // 在坐标（10,50）创建 640 × 480 的画布 var r = Raphael(10, 50, 640, 480); // 创建中心坐标为（320, 240）的饼图，半径为100，数据为[55, 20, 13, 32, 5, 1, 2, 10]的饼图 pie = r.piechart(320, 240, 100, [65, 30, 23, 32, 5, 1, 2, 20], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"] }); // 在坐标（320, 100）绘制文字 r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" }); // 给饼图添加 hover 事件 pie.hover(function() { this.sector.stop(); this.sector.scale(1.1, 1.1, this.cx, this.cy); if(this.label) { this.label[0].stop(); this.label[0].attr({ r: 7.5 }); this.label[1].attr({ "font-weight": 800 }); } }, function() { this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce"); // 添加动画效果 if(this.label) { this.label[0].animate({ r: 5 }, 500, "bounce"); this.label[1].attr({ "font-weight": 400 }); } }); </script>
Raphael做的拓扑图
03-08
用Raphael做的拓扑图，可以拖动，可以定义节点的坐标，链路等
javascript 基于Raphael的工作流可视化编辑
04-24
javascript 基于Raphael的工作流可视化编辑 拖动对应状态图形到窗口 根据锚点链接状态-动作-状态 实现可视化编辑 返回json 序列
Raphael拓扑图
09-17
用Raphael做的拓扑图
Raphael JS - 组织结构图/层次结构图/多叉树图
weixin_34161064的博客
09-06 632
2019独角兽企业重金招聘Python工程师标准>>> ...
raphael.js 流程图实例
weixin_34014555的博客
06-29 407
<html> <head> <title>raphael流程图-http://my.oschina.net/lichaoqiang/</title> <script src="js/jquery.min.js"></script> <script src="js/raphael.js"...
列举一个Flowchart.js编写的示例
最新发布
07-28
以下是一个使用 Flowchart.js 编写的简单示例： ```html <!DOCTYPE html> <title>Flowchart.js Example <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.14.0/flowchart.min...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值