如何在html中自动生成条形图,在网页上面动态生成柱形图

您所在的位置:网站首页 自动生成柱状图 如何在html中自动生成条形图,在网页上面动态生成柱形图

如何在html中自动生成条形图,在网页上面动态生成柱形图

#如何在html中自动生成条形图,在网页上面动态生成柱形图| 来源: 网络整理| 查看: 265

因为做了一个销售统计的功能、老师要求要与数据库有交互、动态生成柱形图、因为弄了很久所以决定写一写保存一些心得、免得忘了。

首先要导入一个包。Chart.bundle.jar、说起这个呢、是队友给我推荐的一个网站、超级棒、很多很多东西帮你生成好只要下载下来调用就行。(点击这个)->Bootstrap中文网

然后就是看那些实例代码再进行修改。

这个是首先输入要统计的家具名称(view):

1586071e186c

sale.jsp

然后就通过struts.xml找到sale的class、跳到action找到对应的控制层(contraller)

1586071e186c

FurnitureAction.java

嗯、然后就是所谓的逻辑层(model)、连接数据库返回数据

1586071e186c

这里是按照月份对每月卖出的家具数量进行分组。

好、跳到显示柱形图的页面去、method代表方法名称

1586071e186c

struts.xml

其实柱形图主要是在前端代码那边、后台基本只是取数据、也没什么特殊。

1586071e186c

记得导包哦~

此处的iterator的value要与上面方法返回的“slist”一致、这里是取后台的赋值给a0到a11。

1586071e186c

下面还有、到s.index==11

这个东东就是将来要显示柱形图的位置哦~~

1586071e186c

这里还是传值

接下来就是生成柱形图的代码。MONTHS在上面已经定义好了、就是表示X坐标

label是这个数据的名称、显示在柱形图上头的、因为是手动输入、每次都不同、所以这里没写

data就是每个柱形条的高度、即Y坐标、后面还有个0表示最少是0、如果不加可能每次会用最小的数据作为Y轴的最小值、而不是从0开始

type:bar就是柱形图的意思、你也可以换成line、就是折线图等等等等

borderSkipped:buttom就是柱形图从底下形成顶上来。

1586071e186c

1586071e186c

接上面的代码

记得放在里面哦~~

最后一个css样式、

1586071e186c

other.css

好啦~~最后生成的页面就是这样

输入沙发、点击开始统计

1586071e186c

sale.jsp

生成这个就是成功啦~~~当然、前提是你要保证数据库有数据啦、

1586071e186c

saleshow.jsp

对了、这个在eclipse上面看不到哦!要去网页打开看啦~

感觉一定有更为简单的办法、但是介于知识水平暂时就到这里、就先做到这里吧、以后有进步再来发新的。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3