网页,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下载

目录
相关文章
|
13天前
|
移动开发 前端开发 JavaScript
纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜
23 6
|
13天前
|
移动开发 前端开发 API
HTML5 Canvas 填充与描边(Fill And Stroke)
HTML5 Canvas 填充与描边(Fill And Stroke)
31 3
|
13天前
|
移动开发 前端开发 API
HTML5 Canvas渐进填充与透明
HTML5 Canvas渐进填充与透明
17 7
|
13天前
|
移动开发 前端开发 JavaScript
HTML5 Canvas鼠标与键盘事件
HTML5 Canvas鼠标与键盘事件
21 5
|
13天前
|
移动开发 前端开发 JavaScript
HTML5 Canvas平移,放缩,旋转演示
HTML5 Canvas平移,放缩,旋转演示
18 4
|
19小时前
|
数据采集 前端开发 JavaScript
Python爬虫技术:动态JavaScript加载音频的解析
Python爬虫技术:动态JavaScript加载音频的解析
|
4天前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
5天前
|
移动开发 HTML5 前端开发
【网页搭建基石】:揭秘HTML标签的魔法世界
【网页搭建基石】:揭秘HTML标签的魔法世界
|
6天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
12 1
|
8天前
|
Web App开发 监控 JavaScript
破解动态网页:如何用JavaScript获取自动消失的联想词
【6月更文挑战第2天】在获取动态加载的联想词时,遇到问题:输入搜索词后弹出的联想词框在失去焦点时消失,使得直接定位HTML元素困难。解决方案包括: 1. 查找DOM节点:在弹框出现时记录其类名或ID,然后通过JavaScript获取元素HTML内容。但由于元素加载有延迟,需在输入框获取焦点后延迟执行,例如使用`setTimeout`。 2. 使用`MutationObserver`监视DOM变化:创建观察者监听特定类的元素出现,当元素加载时打印其HTML。为避免获取旧内容,回调函数中使用`setTimeout`确保DOM完全渲染。
14 3