如何在html中自动生成条形图,在网页上面动态生成柱形图 |
您所在的位置:网站首页 › 自动生成柱状图 › 如何在html中自动生成条形图,在网页上面动态生成柱形图 |
因为做了一个销售统计的功能、老师要求要与数据库有交互、动态生成柱形图、因为弄了很久所以决定写一写保存一些心得、免得忘了。 首先要导入一个包。Chart.bundle.jar、说起这个呢、是队友给我推荐的一个网站、超级棒、很多很多东西帮你生成好只要下载下来调用就行。(点击这个)->Bootstrap中文网 然后就是看那些实例代码再进行修改。 这个是首先输入要统计的家具名称(view): sale.jsp 然后就通过struts.xml找到sale的class、跳到action找到对应的控制层(contraller) FurnitureAction.java 嗯、然后就是所谓的逻辑层(model)、连接数据库返回数据 这里是按照月份对每月卖出的家具数量进行分组。 好、跳到显示柱形图的页面去、method代表方法名称 struts.xml 其实柱形图主要是在前端代码那边、后台基本只是取数据、也没什么特殊。 记得导包哦~ 此处的iterator的value要与上面方法返回的“slist”一致、这里是取后台的赋值给a0到a11。 下面还有、到s.index==11 这个东东就是将来要显示柱形图的位置哦~~ 这里还是传值 接下来就是生成柱形图的代码。MONTHS在上面已经定义好了、就是表示X坐标 label是这个数据的名称、显示在柱形图上头的、因为是手动输入、每次都不同、所以这里没写 data就是每个柱形条的高度、即Y坐标、后面还有个0表示最少是0、如果不加可能每次会用最小的数据作为Y轴的最小值、而不是从0开始 type:bar就是柱形图的意思、你也可以换成line、就是折线图等等等等 borderSkipped:buttom就是柱形图从底下形成顶上来。 接上面的代码 记得放在里面哦~~ 最后一个css样式、 other.css 好啦~~最后生成的页面就是这样 输入沙发、点击开始统计 sale.jsp 生成这个就是成功啦~~~当然、前提是你要保证数据库有数据啦、 saleshow.jsp 对了、这个在eclipse上面看不到哦!要去网页打开看啦~ 感觉一定有更为简单的办法、但是介于知识水平暂时就到这里、就先做到这里吧、以后有进步再来发新的。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |