网页,html5,canvas,js 动态绘制柱形图

<!DOCTYPE html>
    <head><title>chart demo</title>
        <style>
            #chartContainer{
                border:solid 1px #999;
                
            }
        </style>
        <script src="H5Draw.js"></script>
        <script src="h5Charts.js"></script>
        <script>
            function   zxt(){
            var chart = new h5Charts.SerialChart();
            chart.dataProvider = [{age:"18",amount:0.1},{age:"38",amount:0.3},

{age:"8",amount:0.4},{age:"29",amount:0.2}];
            chart.categoryField = "age";
            chart.valueField = "amount";
            chart.type = "column";
            chart.columnWidth = 55;
            chart.colors = ["#f00","#0f0","#0ff","#00f"];
            chart.addTo("chartContainer");
            };
        </script>
    </head>
    <body>
        <canvas id="chartContainer" width="1000" height="400">
             browser doesn't support html5
        </canvas>
        <script>zxt()</script>
    </body>
</html>

本例需要两个js文件,可以去http://download.csdn.net/detail/u013378306/8756825下载

时间: 2024-09-19 10:11:44

网页,html5,canvas,js 动态绘制柱形图的相关文章

Html5 Canvas画布以及绘制矩形实例

Canvas 标签用来建立一个矩形画布区域,利用 Canvas 提供的 JS 方法来绘制图形,可以对画布的每一个像素进行控制,就类似但不局限于 PHP 的 GD 库. 下面我将分多篇文章系统介绍 Canvas 标签的使用方法,虽然 Canvas 标签实际使用的还是非常少,但在 Html5 普及之后必然是一大趋势,我们先下手为强. 结构 Canvas在HTML页面中是一个"<canvas></canvas>"标签,显示为一个矩形区域.矩形区域的左上角为坐标原点(0

8个经典炫酷的HTML5 Canvas动画欣赏

HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮助. 1.HTML5 Canvas可拖动的弹性大树摇摆动画 今天让我们继续来分享一个炫酷的HTML5动画,它是一款基于HTML5 Canvas的大树摇摆动画,这款HTML5动画的特点是我们可以拖拽树枝,从而让整棵树摇摆起来,这样就真实地模拟了大树从摇摆到静止的整个过程,相当逼真. 在线演示     

js HTML5 Canvas绘制转盘抽奖_javascript技巧

本文实例为大家分享了js转盘抽奖的具体代码,供大家参考,具体内容如下 1.实现的基本效果   2.主要的内容  •html5中canvas标签的使用  •jQueryRotate.js旋转插件 3.主要html代码 <body> <div class="content"> <div class="wheel"> <canvas class="item" id="wheelCanvas"

Web Chart入门(1) Web端图形绘制SVG,VML, HTML5 Canvas技术比较

先介绍一下矢量图的概念: 矢量图使用直线和曲线来描述图形,这些图形的元素是一些点.线.矩形.多边形.圆和弧线等等,它们都是通过数学公式计算获得的.例如一幅花的矢量图形实际上是由线段形成外框轮廓,由外框的颜色以及外框所封闭的颜色决定花显示出的颜色. SVG,VML, HTML5 Canvas  这三个技术绘制的都是矢量图. 只是由不同的厂商开发出来的. 要达成的效果基本是一样的. 1. VML 全称Vector Markup Language(矢量可标记语言). 是微软1999年9月附带IE5.0

HTML5 canvas绘制雪花飘落动画(需求分析、知识点、程序编写分布详解)

原文:HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现:虽然哦很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难点分析. 我这几天刚好学习了一下,也趁着此刻有时间从需求分析.知识点.程序编写一步步给大家解剖下,要是在各位关公面前耍大刀了,可别见笑哟. 最终效果图如下: 图1 一.需求分析 1.圆形雪花 本示例中雪花形状使用圆

网页设计:CSS3、HTML5、JS和框架

文章描述:网页设计:CSS3.HTML5.JS和框架.  如今大热的HTML5到底美在哪里?HTML5到底能为实际的移动开发带来哪些改变?来自阿里云云手机服务运营部的前端开发工程师分享了他眼中的HTML5之美,主要讲诉HTML5的常见原理并从CSS.JavaScript和框架三个方面做了细致讲解.说到HTML5一般都会提到它新增了一些新的标签,这些标签能够减少文档的大小,也可以节省一些CSS定义,但是这个好处不足以说明HTML5在技术变革上带来的影响,我们还是先要明白HTML5的原理到底是怎样的

JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例_javascript技巧

本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { width:500px; heig

JavaScript+html5 canvas绘制渐变区域完整实例_javascript技巧

本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { border:3px solid gray; } </style> </head&

JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例_javascript技巧

本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { margin:50px; border:5px solid gray; box-shadow:0p