`
leiwuluan
  • 浏览: 706932 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

HTML5 动态统计表

 
阅读更多


 

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>动态统计图表</title>
</head>

<body>

<div style="text-align:center;">
	<canvas id="testCanvas" width="1024" height="300" style="border:1px solid #1111AA;"></canvas>
	<div>动态统计图表</div>
</div>

<script type="text/javascript">
var canvas = document.getElementById('testCanvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.lineJoin = 'bevel';
ctx.miterLimit = 5;


function changeFun() {
	ctx.clearRect(0, 0, 1024, 300);
	ctx.beginPath();
	var arr = [];
	for(var i=0; i< 30; i++ )
	{
		var random = Math.random();
		random = parseInt(random * 100 % 100 + 1);
		arr.push(random);
	}

	var x = 0;
	for(var i=0; i< 30; i++ )
	{
		var y = arr[i]+50;
			
		ctx.lineTo(x, y);

		ctx.fillText(x+','+100, x-3, y);
		ctx.moveTo(x, y);
		x = x + 35;
	}
	ctx.stroke();
};

setInterval(changeFun,1000);
</script>
</body>
</html>
 
  • 大小: 21.9 KB
0
顶
0
踩
分享到：
| spring mvc xml视图 String转义配置
评论
2 楼 leiwuluan 2012-06-27  
思-->手 写道
怎么DIV里面的内容显示乱码呢

你页面文件编码设为 utf-8 
1 楼 思-->手 2012-06-27  
怎么DIV里面的内容显示乱码呢
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5报表统计静态页面

    HTML5报表统计静态页面是一种基于Web的可视化工具，它利用HTML5的新特性和技术来创建交互式的、数据丰富的图表和报告。HTML5是超文本标记语言的第五个版本，其核心优势在于增强了网页的多媒体支持、离线存储、设备...

    html5手机端统计图表插件

    1. **Canvas元素**：HTML5的Canvas是实现动态图表的关键，它允许通过JavaScript绘制图形。开发者可以通过API来绘制线条、形状、文本等，构建各种复杂的图表。例如，`Chart.js`是一个轻量级的库，利用Canvas绘制出高...

    html5统计图表特效

    HTML5统计图表是一种基于Web的可视化工具，它利用HTML5的新特性，如Canvas、SVG（Scalable Vector Graphics）和WebGL等，为开发者提供了一种高效、动态且交互性强的方式来展示数据。这些图表不仅美观，而且能快速...

    html5圆形统计图

    HTML5是一种强大的网页开发语言，它为创建交互性和动态网页提供了更多可能性。在这个场景中，我们关注的是HTML5中的圆形统计图，一种常用于展示数据或进度的有效方式。"h5圆形进度条"和"半环形进度"是这种图表的两种...

    HTML5后台管理系统模板是一款适合后台统计相关HTML5网站模板下载。.rar

    1. **响应式设计**：HTML5模板通常采用媒体查询和流式布局，确保在不同设备和屏幕尺寸上都能提供良好的用户体验，无论是桌面电脑、平板还是手机。 2. **图表展示**：利用Canvas或SVG，可以创建各种实时更新的统计...

    html5全屏物联网平台数据统计图表展示页面模板

    这个模板利用HTML5的强大功能，结合统计图表和物联网技术，为用户提供了一个直观、动态的数据展示界面。以下是对这个模板涉及的知识点的详细解释： 1. **HTML5**：HTML5是超文本标记语言的最新版本，它增强了网页的...

    html5柱形统计图与曲线统计图插件

    总的来说，这个HTML5柱形统计图与曲线统计图插件结合了jQuery的强大功能和HTML5的先进特性，提供了一种便捷的数据可视化解决方案。无论是用于网站分析、商业报告还是科学研究，都能帮助用户快速有效地呈现复杂数据，...

    JS画出动态统计图

    在JavaScript（JS）中创建动态统计图是一种常见的数据可视化技术，尤其在Web开发中非常实用。动态图可以直观地展示数据的变化，使用户能够更好地理解数据趋势和模式。本项目提供的代码已经实现了这一功能，无需从头...

    HTML5企业数据统计后台管理模板

    5. **CSS与JS**：除了HTML5，CSS（层叠样式表）用于定义页面的样式和布局，而JS（JavaScript）则负责页面的动态交互和功能实现。模板可能包含了自定义的CSS和JS文件，以实现特定的交互效果和业务逻辑。 6. **图标...

    H5柱形统计图

    【H5柱形统计图】是一种基于HTML5技术创建的可视化图表，主要用于数据展示和分析。HTML5作为现代网页开发的基石，提供了丰富的API和元素，使得开发者无需依赖额外的插件或框架就能构建出交互性强、兼容性好的柱状图...

    jasperreport 6.4.1报表动态列，以及生成导出html

    5. **整合到项目**：将编译后的JRXML和Java代码导入Eclipse，配置合适的依赖库，然后运行示例代码以验证动态列和HTML导出功能。 这个压缩包提供的示例应该包含了一个完整的Java项目，包括JasperReport模板文件（....

    jQuery动态统计图形插件.zip

    jQuery动态统计图形插件是JavaScript库中的一个工具，主要用于创建互动性和可视化的数据展示。jQuery本身是一个强大的JavaScript库，简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。结合动态统计图形插件...

    html5流量统计后台管理前端模板9z8.zip

    HTML5流量统计后台管理前端模板9z8.zip是一款专为后台管理系统设计的精美前端静态代码。这个模板基于Bootstrap框架构建，充分利用了HTML5的新特性，提供了丰富的功能和优秀的用户体验。Bootstrap是一个广泛使用的...

    HTML5+CSS3多彩进度条可用投票结果分析

    HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。在这个“HTML5+CSS3多彩进度条”的示例中，我们看到这两种技术如何结合，以实现一种用于投票结果分析的独特交互...

    HTML print打印(分页,统计,排版)

    方案一(适用于动态页面)分层结构 方案二(适用于静态页面)独立结构 /** * 基于jquery的打印分页插件 * 方法API: * loadDate data,model,shownum(数据源[数组],模板页面,每页显示数) data 建议最大数据量不要超过...

    灰色漂亮数据统计表bootstrap后台模板-统计 后台 后台管理 响应式 手机 html5 黑色 登录 管理系统 cms

    这篇文档将深入探讨“灰色漂亮数据统计表bootstrap后台模板”，这是一个专为后台管理系统设计的响应式HTML5模板，尤其适用于需要强大数据展示和管理功能的Web应用。模板采用Bootstrap框架，确保了在不同设备上的良好...

    html5电商销售网站统计后台模板html5电商销售网站统计后台模板.zip

    HTML5电商销售网站统计后台模板是一款专为电子商务平台设计的管理界面模板，它结合了现代Web技术，如HTML5、CSS3以及JavaScript，为后台数据分析和监控提供了直观、高效的用户体验。这款模板通常包括一系列预设计的...

    Html实现统计

    HTML（超文本标记语言）和CSS（层叠样式表）是网页开发的基础，它们共同用于构建和美化网页内容。在本话题中，“Html实现统计”指的是利用HTML来展示数据统计结果，而“漂亮的统计效果”则暗示我们将用CSS来增强视觉...

    html5 canvas支付宝信用数据统计图表插件

    这个"html5 canvas支付宝信用数据统计图表插件"是利用Canvas API创建的一种专用于展示支付宝信用数据的图表工具。在现代网页应用中，数据可视化是非常重要的一个方面，它可以直观地呈现复杂的数据信息，帮助用户理解...

    通过点击日历控件来动态获取查询统计信息

    总之，`WdatePicker.js`是实现动态查询统计信息的一个高效工具，它简化了日期选择和数据交互的过程，提高了Web应用的用户体验。在实际开发中，理解并熟练运用这类控件，对于提升应用程序的功能性和用户体验至关重要...

Magicbox
Global site tag (gtag.js) - Google Analytics