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

html-css056

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

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

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

好了，一切代码说话：

<script type='text/javascript'>

// 对子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>

<style type='text/css'>

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 id='container' >

<div class="xbar">

<div class="b1" id='bar1'>a</div>

<div class="b2" id='bar2'>b</div>

</div>

<div class="xbar">

<div class="b1" id='bar3'>c</div>

<div class="b2" id='bar4'>d</div>

</div>

</div>

1、打开PPT，然后选中图表。

2、选中图表后，点击工具栏中图表工具中的设计。

3、在图标设计页面，点击更改图表类型。

4、点击更改图表类型后，选中条形图，然后选择横向的格式。

5、点击确定后，图标就调成横向的了。

EXCEL中的条形图即是横向柱状图，方法为：选择数据区域→插入→条形图。下面以Excel 2010为例进行演示：

1、选中数据区域→插入→条形图

2、简单调整格式后，显示效果如下