`
阅读更多

      本来页面上是用jfreechart 绘制的数据分析图。但是由于有个页面绘制的图比较多,而且是js选择性的展示哪张图,头说都用jfreechart效率太慢了,把那简单的柱状图,拿去改改(用简单点,而且不怎么占资源的方式)。我反复思量,反复研究,终于搞出个小东西。虽然没有什么技术含量,但是却觉得自己很有创意。全部都是用最简单的HTML 元素制作的,分享下:
1.效果截图

2.简单的代码:

  1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2<html>
  3<head>
  4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5<title>Test</title>
  6</head>
  7
  8<body>
  9<table border=0 cellpadding=0 cellspacing=0>
 10<tr>
 11<td width=1 height=200 bgcolor=red></td>
 12<td width=250><table width="245" border="0" cellspacing="0" align="right"  >
 13  <tr> 
 14    <td width="15" nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 15    <td width="42">&nbsp;</td>
 16    <td width="16">&nbsp;</td>
 17    <td width="41">&nbsp;</td>
 18    <td width="17">&nbsp;</td>
 19    <td width="42">&nbsp;</td>
 20    <td width="17">&nbsp;</td>
 21    <td width="39">&nbsp;</td>
 22  </tr>
 23  <tr> 
 24    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 25    <td>&nbsp;</td>
 26    <td>&nbsp;</td>
 27    <td>&nbsp;</td>
 28    <td bgcolor="#33CCFF">&nbsp;</td>
 29    <td>&nbsp;</td>
 30    <td>&nbsp;</td>
 31    <td>&nbsp;</td>
 32  </tr>
 33  <tr> 
 34    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 35    <td>&nbsp;</td>
 36    <td>&nbsp;</td>
 37    <td>&nbsp;</td>
 38    <td bgcolor="#33CCFF">&nbsp;</td>
 39    <td>&nbsp;</td>
 40    <td>&nbsp;</td>
 41    <td>&nbsp;</td>
 42  </tr>
 43  <tr> 
 44    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 45    <td>&nbsp;</td>
 46    <td bgcolor="#000000">&nbsp;</td>
 47    <td>&nbsp;</td>
 48    <td bgcolor="#33CCFF">&nbsp;</td>
 49    <td>&nbsp;</td>
 50    <td>&nbsp;</td>
 51    <td>&nbsp;</td>
 52  </tr>
 53  <tr> 
 54    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 55    <td>&nbsp;</td>
 56    <td bgcolor="#000000">&nbsp;</td>
 57    <td>&nbsp;</td>
 58    <td bgcolor="#33CCFF">&nbsp;</td>
 59    <td>&nbsp;</td>
 60    <td bgcolor="#FF9933">&nbsp;</td>
 61    <td>&nbsp;</td>
 62  </tr>
 63  <tr> 
 64    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 65    <td>&nbsp;</td>
 66    <td bgcolor="#000000">&nbsp;</td>
 67    <td>&nbsp;</td>
 68    <td bgcolor="#33CCFF">&nbsp;</td>
 69    <td>&nbsp;</td>
 70    <td bgcolor="#FF9933">&nbsp;</td>
 71    <td>&nbsp;</td>
 72  </tr>
 73  <tr> 
 74    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 75    <td>&nbsp;</td>
 76    <td bgcolor="#000000">&nbsp;</td>
 77    <td>&nbsp;</td>
 78    <td bgcolor="#33CCFF">&nbsp;</td>
 79    <td>&nbsp;</td>
 80    <td bgcolor="#FF9933">&nbsp;</td>
 81    <td>&nbsp;</td>
 82  </tr>
 83  <tr> 
 84    <td nowrap bgcolor="#FF0000"><font color="#FFFFFF">&nbsp;</font></td>
 85    <td>&nbsp;</td>
 86    <td bgcolor="#000000">&nbsp;</td>
 87    <td>&nbsp;</td>
 88    <td bgcolor="#33CCFF">&nbsp;</td>
 89    <td>&nbsp;</td>
 90    <td bgcolor="#FF9933">&nbsp;</td>
 91    <td>&nbsp;</td>
 92  </tr>
 93</table></td>
 94</tr>
 95<tr><td colspan=2 height=1 bgcolor=red></td><tr>
 96<table>  
 97</body>
 98</html>
 99
100


 

分享到:
评论

相关推荐

    创意飞机柱状图PPT模板素材.pptx

    本资源是一个创意飞机柱状图PPT模板素材,旨在帮助用户快速创建具有视觉冲击力的PPT报告。下面,我们将从多角度介绍这个模板的知识点。 PPT图表设计 PPT图表是PPT报告中不可或缺的一部分,它可以帮助用户更好地...

    创意飞机柱状图PPT模板素材.rar

    本文将深入探讨“创意飞机柱状图PPT模板素材”这一主题,包括其设计要素、应用场景以及如何有效地利用模板来创建引人入胜的演示文稿。 创意飞机柱状图PPT模板是一种特殊的PPT设计资源,其特色在于将飞机元素与柱状...

    简洁创意柱状图图表下载PPT模板

    这是两张简洁PPT柱状图,第一PPT模板网提供幻灯片图表免费下载; 图表使用黑色、灰色、绿色、橙色、蓝色分别表示每个数据项的情况。简洁易用。 关键词:PPT柱状图图表下载,幻灯片柱形图,.PPTX格式;

    CSS+JS 柱状图

    "CSS+JS柱状图"是一种利用纯CSS和JavaScript实现的柱状图表,它可以帮助开发者创建动态且自定义程度高的图表,无需依赖第三方库如Highcharts或Chart.js。这种技术的优点在于其轻量级、灵活且可以完全控制图表的样式...

    创意雪山形柱状图PPT模板.pptx

    【创意雪山形柱状图PPT模板】是一种独特的可视化工具,常用于数据展示和分析,尤其适用于商业报告、市场研究或项目汇报等场合。这种模板以其引人注目的设计,能够有效地吸引观众的注意力,同时清晰地传达复杂的数据...

    创意雪山形柱状图PPT模板.rar

    【创意雪山形柱状图PPT模板】是一个用于展示数据和信息的专业设计模板,它将传统的柱状图与创新的视觉元素相结合,形成独特的“雪山”形状,为演示文稿增添艺术性和吸引力。这种模板特别适合商务报告、市场分析、...

    3D效果CSS柱状图动画特效.zip

    总的来说,3D效果CSS柱状图动画特效是一个结合了CSS3和JavaScript技术的创新实践,它不仅展示了Web开发的前沿技术,也为数据可视化提供了富有创意的展示方式。通过深入学习和理解这些技术,开发者能够创建出更多独特...

    创意雪山形柱状图PPT模板-1.pptx

    【创意雪山形柱状图PPT模板-1.pptx】是一个精美的PPT模板,设计独特,尤其适合用于展示数据、分析或汇报时需要强调关键比例和趋势的情况。其核心特色是“雪山形柱状图”,这是一种创新的图表设计,能够直观地表现...

    山形锥形柱状图PPT模板素材.rar

    山形锥形柱状图是数据可视化中常用的一种图表类型,尤其在制作PPT报告时,它们能够有效地呈现数据对比、趋势或者分布情况。在这个"山形锥形柱状图PPT模板素材.rar"压缩包中,包含了一个名为"山形锥形柱状图PPT模板...

    ABCD文件集-创意表格图形设计制作(微差数据波动图、折叠图、饼图、柱形图、达成图、分层柱状图)

    适用于经营分析、数据分析、图形制作、创意分析等职场小白人员的简单图形模板,包括可以用做销售分析、经营分析的柱状图、折线图、对比图、趋势图、也包含没有用但蛮有意思的星月图、太极图、风车图等等,整个系列...

    图表教程柱状图PPT学习教案.pptx

    通过这些步骤和技巧,用户不仅可以创建基本的柱状图,还能进一步设计出富有创意的可视化作品。无论是在报告、演示文稿还是教学材料中,掌握这些技巧都能极大地提升数据展示的吸引力和有效性。因此,学习并实践这些...

    实验室试管形状的柱状图PPT.pptx

    【标题】:“实验室试管形状的柱状图PPT.pptx”是一个PPT模板,它采用了独特的设计元素,将柱状图的形状设计成类似实验室试管的样式,以呈现数据和信息。这种创意的设计风格使得专业报告或数据分析更加生动有趣,...

    金币银币元素PPT柱状图

    综上所述,"金币银币元素PPT柱状图"是一种创意且实用的数据展示方式,结合了现代设计元素和数据分析功能,为商业和专业报告增添了趣味性和专业性。使用时,要注重数据的准确性和图表的可读性,以提升信息传达的效率...

    利用D3.js实现最简单的柱状图示例代码

    在本文中,我们将深入探讨如何使用D3.js创建一个简单的柱状图。D3.js(Data-Driven Documents)是一个强大的JavaScript库,它允许开发者通过HTML、SVG和CSS将数据绑定到DOM(文档对象模型),并根据数据驱动文档的...

    电池样式的立体柱状图PPT模板

    总之,"电池样式的立体柱状图PPT模板"是一个实用且富有创意的工具,它结合了美观和功能性,能够帮助用户更有效地传达数据信息,提升演示的质量。无论是新手还是经验丰富的演示者,都能从中受益。记得善用提供的资源...

    PPT 模板,多个图形创意无限

    这些图形可以包括流程图、饼图、柱状图、线图等,有助于将复杂的数据或概念以直观的方式展示给观众。 2. **颜色搭配**:RGB数值(例如R131-G194-B229和R0-G102-B153)是颜色代码,用于定义PPT中的颜色。选择合适的...

    电池样式的立体PPT柱状图

    综上所述,电池样式的立体PPT柱状图是一种富有创意的数据展示方式,通过色彩、立体效果和电池形态的结合,能够有效地传达关于电量或能量的数据信息,同时增加观众的观看兴趣。无论是专业报告还是教学演示,都是一个...

    三角小山样式的PPT柱状图

    总的来说,三角小山样式的PPT柱状图是一种富有创意的数据呈现方式,它不仅能够有效地传达信息,还能增加观众的视觉兴趣。通过熟练掌握这种图表的创建和自定义技巧,我们可以让数据讲故事,提升演示文稿的整体质量。...

    黄紫搭配的柱状图素材PPT模板

    本素材包“黄紫搭配的柱状图素材PPT模板”提供了专业的设计元素,帮助用户快速创建具有吸引力的数据可视化演示。 柱状图是数据可视化的常用图表类型之一,它通过长条的高度或长度来表示数据的大小或数量,便于比较...

    彩色飞机图标柱状图PPT模板

    综上所述,掌握并有效利用“彩色飞机图标柱状图PPT模板”,能帮助我们在数据分析展示时提升信息传达的效果,同时也能让我们的工作显得更加专业和有创意。无论是在商务会议、教育讲座还是个人项目汇报中,这类图表都...

Global site tag (gtag.js) - Google Analytics