`
阅读更多

      本来页面上是用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模板

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

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

    创意飞机柱状图PPT模板素材下载。

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

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

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

    创意雪山形柱状图PPT模板下载。

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

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

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

    山形锥形柱状图PPT模板素材下载。

    Javascript实时柱状图实现代码

    js实现的实时柱状图,非常有创意的想法。

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

    精美PPT模板,可以随意编辑,欢迎下载

    Excel表格创意图形制作-星月图-经营分析

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

    创意手势PPT折线图模板.pptx

    3. PPT模板的种类:PPT模板可以分为多种类型,如折线图模板、柱状图模板、饼状图模板等。不同的模板适用于不同的数据和信息展示。 4. PPT图表的设计原则:PPT图表的设计应该遵循一定的原则,如颜色协调、字体选择、...

    如何用Python绘制3D柱形图

    本文主要讲解如何使用python绘制三维的柱形图,如下图 源代码如下: import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D #构造需要显示的值 X=np.arange(0, 5, step=1)...

    彩色三角形创意PPT图表.rar

    PPT图表使用多种颜色三角形作为装饰,设计版式非常时尚,PPT图表包括:PPT目录、PPT流程图、幻灯片柱状图、递进关系、层级关系图等。本套PPT图表适合制作创意时尚一类的PowerPoint模板; 关键词:彩色、多边形PPT...

    蓝色多边形背景创意PPT模板.rar

    ppt模板内容有抽象人物、地球模型、讲台的形象,立体圆形构成的并列关系,PPT柱状图,文本框,循环关系等一系列PPT图表和PPT关系图。本套PowerPoint模板,适合用来制作艺术设计PowerPoint或者美术教学幻灯片。 ...

    温度计柱形图ppt图表.rar

    温度计创意ppt图表,柱形图ppt图表

    简约扁平几何风咖啡色商务汇报通用ppt模板.zip

    几何图形裁图、几何风创意设计封面,简约扁平化设计,商务气息浓厚的咖啡棕、黑、灰配色,适合工作汇报、工作总结、商务演说、项目介绍等场景应用的简约扁平几何风商务汇报通用ppt模板。

    细线与形状极简视觉创意黄黑简约商务PPT模板.rar

    PPT模板内容页面包含柱状图,并列组合关系,内容呈现等PPT图表和幻灯片素材,方便制作PPT使用; 本套PPT模板适合制作各类通用商务PowerPoint,如:科技公司产品演示幻灯片,软件公司企业培训PPT等; 关键词:灰色...

    ECharts:赋能数据可视化,探索数据的无限可能

    无论是基础的折线图、柱状图、散点图,还是更为复杂的饼图、K线图、热力图,甚至是用于地理数据可视化的地图,ECharts都能轻松应对。这种多样性的图表类型使得用户能够根据自己的数据特性和展示目的,选择最合适的...

    创意手绘年终工作总结PPT模板

    PPT模板封面,放置了手绘的柱状图作为背景图片。下方填写年终工作总结PPT标题文字。界面设计简洁且具有创意。 PowerPoint模板内容页的幻灯片图表,与封面背景风格一致,采用铅笔手绘风制作。 年终工作总结PPT目录: ...

    151页国外创意精美绝伦PPT图表-3.ppt

    1. 图表类型:PPT图表可以分为多种类型,如柱状图、折线图、饼图、柱形图等,每种类型都有其特点和应用场景。 2. 图表设计原则:在设计PPT图表时,需要遵守一些基本原则,如保持简洁整洁、使用统一的颜色和字体、...

Global site tag (gtag.js) - Google Analytics