动态条形图(RunBargraph)用于数据展示

热门
272

最近公司项目需要做各种图标展示,用了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

最近热帖
MVC的博客开发(一)登录注册 1784
关于 1240
c# asp.net mvc 开发的正方教务助手(二) 1190
MVC的博客开发(三)登录注册 1166
MVC的博客开发(二)登录注册 1109
c# asp.net mvc 开发的正方教务助手(一) 1032
安卓注册手机短信验证码验证的案例-02 957
安卓注册手机短信验证码验证的案例-01 858