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

最新推荐文章于 2024-05-04 11:16:37 发布
置顶 最新推荐文章于 2024-05-04 11:16:37 发布
阅读量3.7k 收藏 6
点赞数 1
分类专栏： HTML 文章标签： html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010840685/article/details/104842038
版权

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

欲思
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Tableau实现动态条形图
02-14
资源内包含Tableau模板文件，需要的小伙伴可以自行下载；
工具篇4.5数据可视化工具大全
qq_62377885的博客
03-01 2169
数据可视化不仅是一项技术，也是一门艺术。当然，数据可视化的工具也非常多，仅 Python 就有 matplotlib、plotly、seaborn、bokeh 等多种可视化库，我们可以根据自己的需要进行选择。但不是所有的人都擅长写代码完成数据可视化的工作，这个时候我们可以考虑一些其他的数据可视化工具，比如本文要介绍的 Flourish。Flourish是一个在线。
python绘制条形图用什么函数_如何用python绘制简单条形图？
weixin_39680121的博客
11-20 1107
展开全部如何用python绘制简单条形图呢？这里离不开matplotlib的使32313133353236313431303231363533e4b893e5b19e31333433646531用。条形图是数据可视化图形中很基础也很常用的一种图，简单解释下：条形图也叫长条图（英语：bar chart），亦称条图（英语：bar graph）、条状图、棒形图、柱状图、条形图表，是一种以长方形的长度为变...
2024年刷爆全网的动态条形图，原来5行Python代码就能实现！(1)，海尔面经
最新发布
m0_61068088的博客
05-04 767
现在能在网上找到很多很多的学习资源，有免费的也有收费的，当我拿到1套比较全的学习资源之前，我并没着急去看第1节，我而是去审视这套资源是否值得学习，有时候也会去问一些学长的意见，如果可以之后，我会对这套学习资源做1个学习计划，我的学习计划主要包括规划图和学习进度表。
【数据可视化】动态条形图Python代码实现
记录我的学习历程
09-16 1503
本文将介绍如何使用 Python 编程语言中的 `bar_chart_race_cn` 库创建动态条形图。我们将从准备数据开始，逐步解释代码中的每个部分，包括用户输入、数据读取、设置中文字体和样式，以及创建动态图表。通过本文，读者将学会如何制作令人印象深刻的动态数据可视化图表。
【推荐收藏】matplotlib 制作的动态条形图其实很好看
Python数据挖掘
10-07 1086
大家好，本文将分享如何使用matplotlib制作动态条形图，制作的图很美，这个是我在之前发布的一篇中使用的图片，效果如下。
echarts条形图动态显示
qq_43840793的博客
07-12 790
为了使左侧的类目和柱子同步变化，左侧类目不写成y轴标签，而写成柱子的标签，即在series里写标签。条形图有两个柱子，一个蓝色柱子，一个灰色柱子，两个柱子重合，且蓝柱子在上面。使用datazoom,一次展示5项数据，轮流展示每2s刷新一次。每次展示5个，轮流展示。
动态条形图_练习数据_CSV格式
10-18
动态条形图_练习数据_CSV格式，文章参考：《最简单方法！！用python生成动态条形图》，欢迎大家下载体验~~
动态可视化条形图.rar
04-03
在本项目中，条形图被用作动态展示，可以更生动地展示数据的变化。 5. **Pandas**: Pandas是Python中用于数据分析的重要库，提供了DataFrame数据结构，方便处理和操纵CSV等结构化数据。在这个项目中，Pandas可能...
python读取mysql数据绘制条形图
12-20
在Python编程中，结合MySQL数据库和可视化库可以有效地分析并展示数据。本实例展示了如何从MySQL数据库中提取数据，并利用Plotly库绘制条形图，以便直观地理解数据分布和趋势。以下是具体的知识点解析： 1. **MySQL...
4数据项对比PPT条形图
07-16
在数据分析和报告呈现中，视觉化工具起着至关重要的作用，它们能够清晰、直观地展示数据，帮助观众快速理解复杂的趋势和模式。"4数据项对比PPT条形图"是一种常用的可视化方法，尤其适用于比较不同类别的数值大小。在...
安卓绘制动态柱状图 条形图 折线图
01-20
利用williamchart的library动态绘制柱状图 条形图 以及 折线图 用起来很方便 跟大家分享。
动态条形图表 SimpleBarChart.zip
09-17
动态条形图表 SimpleBarChart ,SimpleBarChart 是个简单的动态条形图类，使用类似 UITableView 的数据源来添...
Barchartrace_test 条形竞赛图 动态可视化条形图
05-15
Barchartrace，条形竞赛图 动态可视化条形图，IE11和360安全浏览器下调试通过！JSON对象中的image得发布成web服务才能正常显示图片，否则一直提示图片路径错误！
太酷了，用Python实现一个动态条形图！
法纳斯特
02-09 4964
数据可视化项目实战~
“数”览十年黄金周：数据指标选择，与Python动态图表绘制
Haoyu_xie的博客
10-04 524
1. 数据是会骗人的，比起绝对数字，比率更适合作为数据指标 2. 央视新闻报道中使用了炫酷的动态条形图，展现十年黄金周出行人数和旅游收入的变化，看着每年都在3. 增长，但是情况是否真的变好？ 4. 使用Python，计算年增长率，使用matplotlib和seaborn库，绘制超级炫酷的动态线形图
如何制作动态条形图
weixin_43699770的博客
04-23 3267
在网上看到动态的条形图，很好奇是怎么制作的，经过1天呕心沥血的查询资料，也勉强制作了一个动态条形图，想学的同学可以参考…(好意思说)。 下载网址 自己百度？我觉得还是要锻炼你们的搜索信息能力，不能惯着！算了，我知道你们懒~网址如下： https://powerbi.microsoft.com/zh-cn/downloads/ 百度网盘： 参考资料： 1.公众号：技术可视化 https:/...
实现动态条形图——matplotlib
qq_44760912的博客
12-08 1883
说明： 首先保证你导入的数据是这样的： 数据源： 链接：https://pan.baidu.com/s/13HzYkMspIzKQRGUxndozQg 提取码：love 1.导入模块，读取文件 import pandas as pd df = pd.read_csv('D:/Python/Mypython/python项目集锦/actor-弹幕数据分析/df_resuluts.csv',engine='python',encoding='utf-8') df.head(5) 2.绘制单个图 %matpl
用Python绘制一套“会跳舞”的动态图形给你看看
<sdffdsfsdfdfs>sfsfsfsdfsdffds</sdfsDS>Fsd
10-19 422
Python实战社群Java实战社群长按识别下方二维码，按需求添加扫码关注添加客服进Python社群▲扫码关注添加客服进Java社群▲作者：Costas Andreou机器之心编译参与：...
动态条形图_练习数据_csv格式
06-23
### 回答1： 动态条形图是一种可以实时展示数据变化的可视化图表。在练习数据中，通常会使用CSV格式来存储数据。 CSV格式是一种简单易懂的文本文件格式，它以逗号为分隔符来区分不同的数据。因此，CSV文件中的每一行代表一个记录，每一列则代表一个数据项。 在动态条形图中，通常将CSV文件中的时间列作为X轴，将其它数据列作为Y轴，以此绘制出随时间变化的柱状图。当新数据被添加到CSV文件中时，动态条形图也会实时更新，从而展示出最新的数据变化。 动态条形图在很多场景下都有广泛的应用，例如股票市场、天气预报、疫情数据等等。通过使用动态条形图，我们可以方便地从数据中获得一些有意义的信息，以便更好地作出判断和决策。 ### 回答2： 动态条形图是一种非常生动、易于理解的数据呈现方式，其能够让数据呈现得更具有时效性和互动性，更能够深入人心。在练习时，若使用CSV格式的数据，通常应该保证数据的准确性和完整性，并且还需要具有一定的规律性和可读性。 CSV格式（Comma Separated Values，逗号分隔值）是一种电子表格常用的数据存储格式，数据以文本文件形式存储，行之间以换行符为分隔符，每行由逗号（或其他符号）分隔各字段。这种格式的数据可以在各种操作系统平台上进行交换和处理，且具有简洁、易读、易理解的优点。 对于动态条形图的练习数据，可以将其按照时间段分类，将每个时间段的数据保存在一个CSV文件中，便于进行后续处理和展示。有关数据字段的描述，可以在文件开头添加注释或者单独保存在一个文档中。 在进行动态条形图的数据呈现时，需要根据实际需要，选择适合的软件工具实现。例如，使用可视化工具如Tableau、Google Charts、HighCharts等，可以帮助进行数据可视化呈现，并提供各种多彩的视觉效果和互动功能，不仅可以更好地展示数据，还可以方便地与观众进行交流和讨论。 综上所述，动态条形图_练习数据_csv格式的实现需要注意数据的规范性、准确性和完整性。只有保证数据质量，才能够更好地进行数据可视化的呈现，以达到更好的展示效果和交流效果。 ### 回答3： 动态条形图是一种数据可视化工具，可以直观地展示数据随着时间的变化情况。练习数据可以是任何类型的数据，常见的包括股票价格、销售额、人口数量等。 动态条形图通常使用CSV格式的数据文件，CSV（Comma Separated Values）格式是一种逗号分隔的文本文件格式，以逗号分隔每个数据项。CSV格式的数据文件可以很容易地导入到数据可视化工具中，如Excel、Tableau等，以生成动态条形图。 生成动态条形图需要将时间作为X轴，将数据指标作为Y轴，可以使用不同颜色、样式的条形来表示不同数据指标，通过动态展示条形的高度来展示数据的变化趋势。同时，还可以添加轨迹线、注释等元素来增强数据展示的效果，提升可视化效果的质量。 动态条形图作为一种高效的数据可视化工具，广泛应用于各行业的数据分析、决策以及展示中。对于数据分析师和决策者来说，通过动态条形图可以更加直观地了解数据的变化趋势和规律，从而做出更加准确、有针对性的决策。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值