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

简介: <!DOCTYPE html>     <head><title>chart demo</title>         <style>             #chartContainer{                 border:solid 1px #999;                       

<!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下载

目录
相关文章
|
19天前
|
数据挖掘 Shell 测试技术
怎么用Python解析HTML轻松搞定网页数据
**Python解析HTML摘要** 本文介绍了使用Python处理HTML的常见需求,如数据提取、网络爬虫和分析,并讨论了三种解析方法。正则表达式适用于简单匹配,但对复杂HTML不理想;BeautifulSoup提供简单API,适合多数情况;lxml结合XPath,适合处理大型复杂文档。示例展示了如何用这些方法提取链接。
|
3天前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
15 0
|
17天前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
16 0
JS代码动态打印404页面源码
|
18天前
动态粒子发射404网站HTML源码
动态粒子发射404网站HTML源码,粒子内容可以进行修改,默认是4,0数字还有一个页面不存在英文,可以自行修改,喜欢的朋友可以拿去使用,源码是html,记事本打开修改即可,鼠标双击可以运行
28 0
动态粒子发射404网站HTML源码
|
23天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
22天前
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件,支持样式类型,当前页,每页显示数量,按钮数量,总条数,上一页文字,下一页文字,输入框跳转等功能。
15 1
|
25天前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
20 1
|
27天前
|
前端开发 JavaScript
使用JavaScript动态更改元素的CSS属性
【6月更文挑战第29天】使用JavaScript动态更改元素的CSS属性
31 3
|
28天前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
28 2
|
22天前
|
数据采集 XML 存储
HTML内容爬取:使用Objective-C进行网页数据提取
HTML内容爬取:使用Objective-C进行网页数据提取