div+css实现这种柱状图效果要怎么做

2023-02-19 20:38:02html-css012

div+css实现这种柱状图效果要怎么做,第1张

做到重下往上排放没办法，要实现则要计算好位置。

为简化柱状图布局计算，需在div2/div3外再套一个div，高度改变需重新计算位置。

好了，一切代码说话：

// 对子div（bar1,bar2,bar3,bar4……）设置新高度

function setBarHeight(obj, nh) {

var oh = obj.currentStyle.height// 旧高度

obj.style.height = nh // 设置新高度

var p = obj.parentNode// 上一层div

var v = parseInt(oh.match(/\d+/)[0]) - nh//　变化量

var ph = p.currentStyle.bottom// 上级DIV旧位移

p.style.bottom = ph.replace(/\d+/, function($0) { return parseInt($0) + v }) // 定位上一层div

}

</script>

div#container {width: 600height: 400 border: thin 1px grey solid}

div.xbar { float:leftmargin-left: 30width:50position: relativebottom:-358}

div.xbar div { height: 20overflow: hiddenborder: thin 1px grey solid}

div.b1 { background-color:yellow}

div.b2 { background-color:lime}

</style>

</div>

</div>

导读：俗话说“巧妇难为无米之炊”。数据时代，没有一款好的数据可视化分析工具，光有团队怎么行？商场如战场，数据是把枪。亚马逊运用大数据为客户推荐商品信息，阿里用大数据成立了小微金融服务集团，而谷歌更是计划用大数据接管世界……不知不觉，数据已经成为我们生活中必不可少的利器。本文收集了各个平台各种行业的数据可视化分析工具，让你不仅大饱眼福，而且还可以让你事半功倍。

一款免费的新型大数据可视化分析工具，操作简单，支持多种数据源，上卷下钻，数据预测，聚类分析，相关性分析，数据联想，决策树，地图，组合图等功能。

Charting Fonts是将符号字体与字体整合（把符号变成字体），创建出漂亮的矢量化图标。

Gephi是进行社会图谱数据可视化分析的工具，不但能处理大规模数据集并且Gephi是一个可视化的网络探索平台，用于构建动态的、分层的数据图表。

CartoDB是一个不可错过的网站，你可以用CartoDB很轻易就把表格数据和地图关联起来，这方面CartoDB是最优秀的选择。

Google Chart提供了一种非常完美的方式来可视化数据，提供了大量现成的图标类型，从简单的线图表到复杂的分层树地图等。它还内置了动画和用户交互控制。

D3（Data Driven Documents）是支持SVG渲染的另一种JavaScript库。但是D3能够提供大量线性图和条形图之外的复杂图表样式，例如Voronoi图、树形图、圆形集群和单词云等。

Crossfilter既是图表，又是互动图形用户界面的小程序，当你调整一个图表中的输入范围时，其他关联图表的数据也会随之改变

Raphael是创建图表和图形的JavaScript库，与其他库最大的不同是输出格式仅限SVG和VML.

R语言是主要用于统计分析、绘图的语言和操作环境。虽然R主要用于统计分析或者开发统

计相关的软件，但也有用作矩阵计算。其分析速度可比美GNUOctave甚至商业软件MATLAB。

如果你需要制作信息图而不仅仅是数据可视化，Visual.ly是最流行的一个选择。

Weka是一个能根据属性分类和集群大量数据的优秀工具，Weka不但是数据分析的强大工具，还能生成一些简单的图表。

NodeBox是OS X上创建二维图形和可视化的应用程序，你需要了解Python程序，NodeBox与Processing类似，但没有Processing的互动功能。

Processing是数据可视化的招牌工具。你只需要编写一些简单的代码，然后编译成Java。Processing可以在几乎所有平台上运行。

Leaflet是一个开源的JavaScript库，用来开发移动友好地交互地图。

Openlayers可能是所有地图库中可靠性最高的一个。虽然文档注释并不完善。且学习曲线非常陡峭，但是对于特定的任务来说，Openlayers能够提供一些其他地图库都没有的特殊工具。

PolyMaps是一个地图库，主要面向数据可视化用户。PolyMaps在地图风格化方面有独到之处，类似CSS样式表的选择器。

Timeline即时间轴，用户通过这个工具可以一目了然的知道自己在何时做了什么。

jsDraw2DX是一个标准的JavaScript库，用来创建任意类型的SVG交互式图形，可生成包括线、矩形、多边形、椭圆、弧线等图形。

iCharts提供可一个用于创建并呈现引人注目图表的托管解决方案。有许多不同种类的图表可供选择，每种类型都完全可定制，以适合网站的主题。iCharts有交互元素，可以从Google Doc、Excel表单和其他来源中获取数据。

Modest Maps是一个轻量级、可扩展的、可定制的和免费的地图显示类库，这个类库能帮助开发人员在他们自己的项目里能够与地图进行交互。

Many Eyes是一个Web应用程序，用来创建、分享和讨论用户上传图形数据。

Anychart是一个灵活的基于Flash/JavaScript(HTML5)的图表解决方案、跨浏览器、跨平台。除了图表功能外，它还有一款收费的交互式图表和仪表。

Kartograph不需要任何地图提供者像Google Maps，用来建立互动式地图，由两个libraries组成，从空间数据开放格式，利用向量投影的Python library以及post GIS，并将两者结合到SVG和JavaScript library，并把这些SVG资料转变成互动性地图。

Sigma.js是一个开源的轻量级库，用来显示交互式的静态和动态图表。

经常使用开源软件的朋友应该很熟悉ECharts，大家都知道去年春节以及近期央视大规划报道的百度大数据产品，如百度迁徙、百度司南、百度大数据预测等等，这些产品的数据可视化均是通过ECharts来实现的。

Zoho Reports支持丰富的功能帮助不同的用户解决各种个性化需求，支持SQL查询、类四暗自表格界面等。

Quantum GIS(QDIS)是一个用户界面友好、开源代码的GIS客户端程序，支持数据的可视化、管理、编辑与分析和印刷地图的制作。

Tableau Public是一款桌面可视化工具，用户可以创建自己的数据可视化，并将交互性数据可视化发布到网页上。

Paper.js是一个开源向量图表叙述架构，能够在HTML5 Canvas 运作，对于初学者来说它是很容易学习的，其中也有很多专业面向可以提供中阶及高阶使用者。

Dundas Chart处于行业领先地位的NET图表处理控件，于2009年被微软收购，并将图表产品的一部分功能集成到Visual Studio中。

TimeFlow Analytical Timeline是为了暂时性资料的视觉化工具，现在有alpha版本因此有机会可以发现差错，提供以下不同的呈现方式：时间轴、日历、柱状图、表格等。

Gantti是一个开源的PHP类，帮助用户即时生成Gantti图表。使用Gantti创建图表无需使用JavaScript，纯HTML-CSS3实现。图表默认输出非常漂亮，但用户可以自定义样式进行输出（SASS样式表）。

Smoothie Charts是一个十分小的动态流数据图表路。通过推送一个webSocket来显示实时数据流。Smoothie Charts只支持Chorme和Safari浏览器，并且不支持刻印文字或饼图，它很擅长显示流媒体数据。

Flot是一个优秀的线框图表库，支持所有支持canvas的浏览器（目前主流的浏览器如火狐、IE、Chrome等都支持）。

Pizza Pie Charts是个响应式饼图图表，基于Adobe Snap SVG框架，通过HTML标记和CSS来替代JavaScript对象，更容易集成各种先进的技术。

Fusion Charts Suit XT是一款跨平台、跨浏览器的JavaScript图表组件，为你提供令人愉悦的JavaScript图表体验。它是最全面的图表解决方案，包含90+图表类型和众多交互功能，包括3D、各种仪表、工具提示、向下钻取、缩放和滚动等。它拥有完整的文档以及现成的演示，可以帮助你快速创建图表。

Protovis是一个可视化JavaScript图表生成工具。

Arbor.Js提供有效率、以力导向的版面配置演算法，抽象画图表组织以及筛选更新的处理。

Highchart.js是单纯由JavaScript所写的图表资料库，提供简单的方法来增加互动性图表来表达你的网站或网站应用程式。目前它能支援线图、样条函数图。

Circos最初主要用于基因组序列相关数据的可视化，目前已应用于多个领域，例如：影视作品中的人物关系分析，物流公司的订单来源和流向分析等，大多数关系型数据都可以尝试用Circos来可视化。

NodeXLDE 主要功能是社交网络可视化。

BirdEye是Decearative Visual Analytics，它属于一个群体专案，为了要提升设计和广泛的开源资料视觉化发展，并且为了Adobe Flex建视觉分析图库，这个动作以叙述性的资料库为主，让使用者能够建立多元资料视觉化界面来分析以及呈现资讯。

Visualize Free是一个建立在高阶商业后台集游InetScoft开发的视觉化软体免费的视觉分析工具，可从多元变量资料筛选并看其趋势，或是利用简单地点及方法来切割资料或是小范围的资料。

OpenStreetMap是一个世界地图，由像您一样的人们所构筑，可依据开放协议自由使用。

OpenHeatMap简单易用，用户可以用它上传数据、创建地图、交流信息。它可以把数据（如Google Spreadsheet的表单）转化为交互式的地图应用，并在网上分享。

GeoCommons可以使用户构建富交互可视化应用来解决问题，即使他们没有任何传统地图使用经验。你可以将实社会化数据或者GeoCommons保存的超5万份开源数据在地图上可视化，创造带交互的可视化分析作品，并将作品嵌入网站、博客或分享到社交网络上。

来源: 悟空智能科技

在上一篇文章我们讲到构建项目，这篇文章，我们就来讲解一下，在vue项目中使用echarts制作3d柱状图。