`
阅读更多

      本来页面上是用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柱状图模板.pptx

    在“年度比较PPT柱状图模板”中,我们可以利用柱状图展示的关键财务指标包括税收增加、测量值、利润和成本。这些指标是商业决策和财务分析的核心要素,借助柱状图的直观表达,我们能够清晰地向观众传达这些指标随...

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

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

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

    为此,我们特别推荐使用“创意雪山形柱状图PPT模板”,这是一款将传统数据可视化工具——柱状图与艺术设计相结合的创新模板,为数据展示提供了新的视觉维度。 首先,【创意雪山形柱状图PPT模板】的核心优势在于其...

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

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

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

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

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

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

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

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

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

    今天,我们要探讨的是一款名为“实验室试管形状的柱状图PPT.pptx”的PPT模板,它通过创意的设计,将传统的柱状图变身为试管形状,这样的设计不仅新颖,而且在科学和医学领域中具有广泛的应用。 首先,“实验室试管...

    金币银币元素PPT柱状图

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

    电池柱状图源码下载

    为此,开发者社区中出现了诸多创新的解决方案,而“电池柱状图源码下载”就是其中一个备受瞩目的资源。 该源码由源码天堂IOS源码频道免费提供下载,开发者可以便捷地获取到这款源码,进而在自己的iOS应用中实现一种...

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

Global site tag (gtag.js) - Google Analytics