用CSS Flex 布局绘制柱状图 Bar chart
2020/3/14 5:01:26
本文主要是介绍用CSS Flex 布局绘制柱状图 Bar chart,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
关于flex布局,可以看我这篇 图解Flex布局
本文基于的框架:微信小程序、uniapp(Vue.js)、SCSS。原理是一样的,我就不转换成原生的Vue.js和css了。
原理:
模板:
v-for="i in 5"
循环显示5个bar
:style="{ 'height': readingHoursHeight[i] + 'px'
根据readingHoursHeight的数据动态设置bar的高度
{{ readingHours[i] }}
显示数字标签
<view class="container"> <!-- 循环显示5个bar --> <view v-for="i in 5" :key="i" class="bar-item-box"> {{ readingHours[i] }} <view class="bar-item" :style="{ 'height': readingHoursHeight[i] + 'px' }"></view> </view> </view>
JS:
模拟数据
data () { return { bookId: '', // 模拟每日读书时长 readingHours: [10, 30, 20, 100, 49], // 计算时长的高度 readingHoursHeight: [] } },
计算每个时长对应的bar高度
// 计算bar的高度 computeBarHeight: function () { // 先备份this,待会在uni的方法里会被覆盖 var _this = this // box的高度 var boxHeight = 0 // 获取最长的时长,作为最大的高度 var max = this.maxHours(this.readingHours) // uniapp的方法,可以改为vuejs的方法 uni.getSystemInfo({ success: function (res) { // res - 各种参数 let info = uni.createSelectorQuery().select('.bar-chart-box') info.boundingClientRect(function (data) { // data - 各种参数 // 获取box元素高度 boxHeight = data.height - 20 // 计算每个时长占最大高度的比例来设置高度 for (let i = 0; i < _this.readingHours.length; i++) { let h = _this.readingHours[i] / _this.readingHours[max] * boxHeight // 把计算好的高度push到readingHoursHeight数组里 _this.readingHoursHeight.push(h) } }).exec() } }) }, // 获取最大时长 maxHours: function (arr) { var max = 0 for (let i = 1; i < arr.length; i++) { if (arr[i] > arr[max]) { max = i } } return max }
SCSS:
.bars { display: flex; flex-grow: 1; justify-content: space-around; align-items: flex-end; border-bottom: #efefef 2rpx solid; margin-bottom: 20rpx; .bar-item-box { flex: 0.1; text-align: center; color: #9b9b9b; } }
Exchange blogroll: http://laker.me/blog
Github:https://github.com/younglaker
这篇关于用CSS Flex 布局绘制柱状图 Bar chart的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程