创意柱状图

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

2.简单的代码:

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


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 以下是使用Python和Matplotlib库绘制三维柱状图和梯形图的示例代码: ```python import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D # 创建数据 x = np.arange(0, 10) y = np.random.randint(1, 10, size=(10,)) z = np.zeros_like(x) dx = np.ones_like(x) dy = np.ones_like(y) dz = y # 创建3D图像 fig = plt.figure() ax = fig.add_subplot(111, projection='3d') # 绘制柱状图 ax.bar(x, y, zs=z, zdir='y', alpha=0.8) # 绘制梯形图 ax.bar(x, y, zs=z, zdir='y', alpha=0.8, width=0.5, bottom=0, color='g') # 设置坐标轴标签 ax.set_xlabel('X') ax.set_ylabel('Y') ax.set_zlabel('Z') # 显示图像 plt.show() ``` 运行该代码将生成一个包含柱状图和梯形图的三维图像。可以根据需要修改数据和参数以生成不同形状的图像。 ### 回答2: 使用三维体形状画创意柱状图梯形可以使用Python中的matplotlib库来实现。 首先,我们需要导入需要的库: ```python import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D ``` 然后,创建一个三维坐标系: ```python fig = plt.figure() ax = fig.add_subplot(111, projection='3d') ``` 接着,定义梯形柱的底部、顶部和高度: ```python bottom = [0,1,2,3,4] top = [1,2,3,4,5] height = [1,2,3,4,5] # 可根据需求自定义高度 ``` 然后,创建一个梯形柱的集合: ```python for i in range(len(bottom)): ax.bar3d(0,i,bottom[i],1,1,height[i]) ``` 最后,我们可以设置坐标轴的范围和标签,并显示图形: ```python ax.set_xlabel('X') ax.set_ylabel('Y') ax.set_zlabel('Z') plt.show() ``` 以上代码可以画出一个梯形柱的面板,你可以根据自己的需求修改底部、顶部和高度的数值,以及自定义梯形柱的数量和形状。 ### 回答3: 要使用三维体形状画创意柱状图梯形,我们可以使用Python的matplotlib库来实现。以下是一个简单的示例代码: ```python import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D # 创建数据 x = np.arange(1, 6) # x轴的值 y = np.arange(1, 6) # y轴的值 z = np.zeros((5, 5)) # z轴的值,初始都为0 # 定义每个柱状图的高度 z[0, :] = 1 z[1, :] = 2 z[2, :] = 3 z[3, :] = 4 z[4, :] = 5 # 创建3D坐标系 fig = plt.figure() ax = fig.add_subplot(111, projection='3d') # 绘制柱状图梯形 ax.bar3d(x, y, np.zeros_like(z), 0.8, 0.8, z) # 设置坐标轴标签 ax.set_xlabel('X轴') ax.set_ylabel('Y轴') ax.set_zlabel('Z轴') # 设置图形标题 plt.title('创意柱状图梯形') # 显示图形 plt.show() ``` 这段代码首先引入了必要的库,并创建了x、y和z轴的数据。接着,通过给定每个柱状图的高度,将z数组的对应元素设置为不同的值。然后,使用`plt.figure()`和`fig.add_subplot()`方法创建一个3D坐标系。最后,通过`ax.bar3d()`方法绘制柱状图梯形,并通过`ax.set_xlabel()`等方法设置坐标轴标签和图形标题。最后,使用`plt.show()`显示图形。 通过这段代码我们可以利用三维体形状绘制出创意柱状图梯形,并可以根据需要调整数据和图形的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值