专栏首页张善友的专栏HTML5 canvas图形库RGraph

HTML5 canvas图形库RGraph

在新的HTML5标准中,新增了一个非常重要的元素—canvas元素。使用该元素,可以在页面中直接进行各种复杂图形的制作。因此,如果使用该元素绘制统计图,比之前使用服务器端控件来生成统计图的方法更加具有优越性,因为使用了该元素之后,绘制统计图的工作是直接在客户端进行的,而不再是在服务器端所完成的了。这不仅意味着不再占用服务器端的资源,而且意味着可以直接利用客户端计算机的强大资源,绘制统计图的速度也就可以大大地得到提高了。而且,因为用来控制canvas图形绘制的脚本代码是可以被压缩的,可以被缓存的,所以也就可以大幅度地减少带宽的占用了.

RGraph是HTML5的JS图表库,拥有20多个类型的图表。利用最新的HTML5 canvas标签,这个工具可在网页浏览器中生成JavaScript的图表,这意味着更快的网页加载和更少的Web服务器负载。

官方主页:http://www.rgraph.net/,注意该项目在非商业使用上免费,若商业使用则需要付费,具体细节请查阅其RGraph license。

HTML5:使用RGraph绘制折线图(一)

HTML5:使用RGraph绘制折线图(二)

HTML5:使用RGraph绘制折线图(三)

HTML5:使用RGraph绘制折线图(四)

品尝Android(三)移动终端报表展示

MSTest or TRX to HTML with Animated Charts

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 移动端web开发,click touch tap区别

    移动端用tap时会有穿透问题 一:click与tap比较 click与tap都会触发点击事件,但是在手机web端,click会有200-300ms的延迟,所以一...

    用户1174387
  • [Canvas前端游戏开发]——FlappyBird详解

    一直想自己做点小东西,直到最近看了本《HTML5游戏开发》,才了解游戏开发中的一点点入门知识。 本篇就针对学习的几个样例,自己动手实践,做了个FlappyB...

    用户1154259
  • html5页面实现点击复制功能

    在实际工作中,有时候会遇到这样的需求,页面上有一个链接,不需要选中链接内容,只需要点击复制按钮,就可以把链接内容复制到剪切板。这时候可以使用clipboard插...

    用户1174387
  • JS魔法堂:阻止元素被选中

    一、前言                               在为IE5.5~9polyfill HTML5新特性placeholder时需要阻止元素被...

    ^_^肥仔John
  • 【AngularJS】—— 5 表单

    这部分,我们写一个表单程序,使用angularjs的检测并完成表单属性的获取与拷贝。   在AngularJS中,也支持html5中多种控件的自动检测,如...

    用户1154259
  • JS魔法堂:IE5~9的Drag&Drop API

    一、前言                                  《 HTML5魔法堂:全面理解Drag & Drop API》中提到从IE5开始...

    ^_^肥仔John
  • JS魔法堂:那些困扰你的DOM集合类型

    一、前言                                     大家先看看下面的js,猜猜结果会怎样吧!   可选答案:   ①. 获取id属...

    ^_^肥仔John
  • 关于HTML面试题汇总之H5

    一、H5有哪些新特性,移除了哪些元素?如何处理h5新标签的浏览器兼容性问题,如何区分html和html5 1. html5不在是SGL(通用标记语言)的一个子集...

    sam dragon
  • HTML5魔法堂:全面理解Drag & Drop API

    一、前言                                      在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML...

    ^_^肥仔John
  • JS魔法堂:LINK元素深入详解

    一、前言                               我们一般使用方式为 <link type="text/css" rel="styleshe...

    ^_^肥仔John

扫码关注云+社区

领取腾讯云代金券