最近公司項目需要做各種圖標展示，用了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

總結

以上是生活随笔為你收集整理的动态条形图(RunBargraph)用于数据展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。