上海集团网站制作,重庆市设计院,机械网站建设开发,淘客网站开发最近公司项目需要做各种图标展示#xff0c;用了Echarts的条形图和柱状图#xff0c;但是老板还是觉得不够生动#xff0c;看来时候祭出大招了
由此衍生在空余时间写下了此篇博客#xff0c;首先还是看效果图:
注意#xff0c;此图中数据并非真实数据#xff0c;只是为…最近公司项目需要做各种图标展示用了Echarts的条形图和柱状图但是老板还是觉得不够生动看来时候祭出大招了
由此衍生在空余时间写下了此篇博客首先还是看效果图:
注意此图中数据并非真实数据只是为测试代码使用的生成的随机数值
展示网站:展示网址 首先本文代码基于:https://github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js
项目二次修改而成原项目需要在EXCEL的CSV文件中编辑生成好数据并点击上传后才能展示效果我就在想既然能读取EXCEL里的数据拿来展示为何不能够用AJAX请求API来得到数据动态的生成数据展示呐
改造开始开整:
1.首先去除上传框 原项目中SVG这个元素设置的是是固定的高度和宽度但是实际项目中由于各个电脑分辨率不同的问题所以这里
我用JQ读取页面能够看到的高度和宽度赋值给SVG元素
2.设置完成后我们去除 visual.js里面input上传后读取EXCEL的代码 3.最后一步,前台通过AJAX访问接口读取数据并渲染 data.json内数据如下所示:
{code:0,msg:null,count:0,data:[{type:湖北,name:武汉市,value:315,date:1月26日},{type:湖北,name:黄石市,value:33,date:1月26日},{type:湖北,name:十堰市,value:23,date:1月26日},{type:湖北,name:襄阳市,value:61,date:1月26日},{type:湖北,name:宜昌市,value:12,date:1月26日},{type:湖北,name:荆州市,value:30,date:1月26日},{type:湖北,name:荆门市,value:28,date:1月26日},{type:湖北,name:鄂州市,value:27,date:1月26日},{type:湖北,name:孝感市,value:101,date:1月26日},{type:湖北,name:黄冈市,value:111,date:1月26日},{type:湖北,name:咸宁市,value:21,date:1月26日},{type:湖北,name:随州市,value:46,date:1月26日},{type:湖北,name:恩施州,value:13,date:1月26日},{type:湖北,name:仙桃市,value:5,date:1月26日},{type:湖北,name:天门市,value:11,date:1月26日},{type:湖北,name:武汉市,value:273,date:1月27日},{type:湖北,name:黄石市,value:48,date:1月27日},{type:湖北,name:十堰市,value:86,date:1月27日},{type:湖北,name:襄阳市,value:24,date:1月27日},{type:湖北,name:宜昌市,value:242,date:1月27日},{type:湖北,name:荆州市,value:415,date:1月27日},{type:湖北,name:荆门市,value:205,date:1月27日},{type:湖北,name:鄂州市,value:99,date:1月27日},{type:湖北,name:孝感市,value:88,date:1月27日},{type:湖北,name:黄冈市,value:342,date:1月27日},{type:湖北,name:咸宁市,value:408,date:1月27日},{type:湖北,name:随州市,value:286,date:1月27日},{type:湖北,name:恩施州,value:110,date:1月27日},{type:湖北,name:仙桃市,value:14,date:1月27日},{type:湖北,name:天门市,value:385,date:1月27日},{type:湖北,name:武汉市,value:9,date:1月28日},{type:湖北,name:黄石市,value:183,date:1月28日},{type:湖北,name:十堰市,value:459,date:1月28日},{type:湖北,name:襄阳市,value:500,date:1月28日},{type:湖北,name:宜昌市,value:8,date:1月28日},{type:湖北,name:荆州市,value:136,date:1月28日},{type:湖北,name:荆门市,value:331,date:1月28日},{type:湖北,name:鄂州市,value:430,date:1月28日},{type:湖北,name:孝感市,value:491,date:1月28日},{type:湖北,name:黄冈市,value:264,date:1月28日},{type:湖北,name:咸宁市,value:34,date:1月28日},{type:湖北,name:随州市,value:495,date:1月28日},{type:湖北,name:恩施州,value:117,date:1月28日},{type:湖北,name:仙桃市,value:166,date:1月28日},{type:湖北,name:天门市,value:362,date:1月28日},{type:湖北,name:武汉市,value:198,date:1月29日},{type:湖北,name:黄石市,value:343,date:1月29日},{type:湖北,name:十堰市,value:280,date:1月29日},{type:湖北,name:襄阳市,value:495,date:1月29日},{type:湖北,name:宜昌市,value:401,date:1月29日},{type:湖北,name:荆州市,value:490,date:1月29日},{type:湖北,name:荆门市,value:249,date:1月29日},{type:湖北,name:鄂州市,value:460,date:1月29日},{type:湖北,name:孝感市,value:196,date:1月29日},{type:湖北,name:黄冈市,value:64,date:1月29日},{type:湖北,name:咸宁市,value:253,date:1月29日},{type:湖北,name:随州市,value:139,date:1月29日},{type:湖北,name:恩施州,value:173,date:1月29日},{type:湖北,name:仙桃市,value:446,date:1月29日},{type:湖北,name:天门市,value:159,date:1月29日},{type:湖北,name:武汉市,value:268,date:1月30日},{type:湖北,name:黄石市,value:246,date:1月30日},{type:湖北,name:十堰市,value:420,date:1月30日},{type:湖北,name:襄阳市,value:36,date:1月30日},{type:湖北,name:宜昌市,value:171,date:1月30日},{type:湖北,name:荆州市,value:299,date:1月30日},{type:湖北,name:荆门市,value:125,date:1月30日},{type:湖北,name:鄂州市,value:389,date:1月30日},{type:湖北,name:孝感市,value:241,date:1月30日},{type:湖北,name:黄冈市,value:48,date:1月30日},{type:湖北,name:咸宁市,value:64,date:1月30日},{type:湖北,name:随州市,value:476,date:1月30日},{type:湖北,name:恩施州,value:101,date:1月30日},{type:湖北,name:仙桃市,value:347,date:1月30日},{type:湖北,name:天门市,value:167,date:1月30日},{type:湖北,name:武汉市,value:375,date:1月31日},{type:湖北,name:黄石市,value:342,date:1月31日},{type:湖北,name:十堰市,value:422,date:1月31日},{type:湖北,name:襄阳市,value:135,date:1月31日},{type:湖北,name:宜昌市,value:215,date:1月31日},{type:湖北,name:荆州市,value:227,date:1月31日},{type:湖北,name:荆门市,value:266,date:1月31日},{type:湖北,name:鄂州市,value:461,date:1月31日},{type:湖北,name:孝感市,value:281,date:1月31日},{type:湖北,name:黄冈市,value:218,date:1月31日},{type:湖北,name:咸宁市,value:47,date:1月31日},{type:湖北,name:随州市,value:324,date:1月31日},{type:湖北,name:恩施州,value:72,date:1月31日},{type:湖北,name:仙桃市,value:314,date:1月31日},{type:湖北,name:天门市,value:293,date:1月31日},{type:湖北,name:武汉市,value:143,date:2月1日},{type:湖北,name:黄石市,value:265,date:2月1日},{type:湖北,name:十堰市,value:48,date:2月1日},{type:湖北,name:襄阳市,value:212,date:2月1日},{type:湖北,name:宜昌市,value:165,date:2月1日},{type:湖北,name:荆州市,value:68,date:2月1日},{type:湖北,name:荆门市,value:370,date:2月1日},{type:湖北,name:鄂州市,value:308,date:2月1日},{type:湖北,name:孝感市,value:253,date:2月1日},{type:湖北,name:黄冈市,value:106,date:2月1日},{type:湖北,name:咸宁市,value:83,date:2月1日},{type:湖北,name:随州市,value:348,date:2月1日},{type:湖北,name:恩施州,value:381,date:2月1日},{type:湖北,name:仙桃市,value:279,date:2月1日},{type:湖北,name:天门市,value:195,date:2月1日}]
}
最后访问数据就能得到动态的条形图了
最后源码地址:https://github.com/jock-x/AjaxBarGraph.git
