html chat柱状图模板,用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] }} 显示数字标签
{{ readingHours[i] }}
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;
}
}
html chat柱状图模板,用CSS Flex 布局绘制柱状图 Bar chart相关推荐
- css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言 之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
- [css] flex布局的缺点有哪些?(除兼容性外)
[css] flex布局的缺点有哪些?(除兼容性外) 无法直接定义列数(要使用百分比的方式实现) 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目 ...
- html实现 左图右文_让CSS flex布局最后一行左对齐的N种方法
作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言 小伙伴们是否还记得,之前小编也发布了几篇关于CS ...
- css flex布局 模型(CSS justify-content 属性) - 代码案例
css flex布局 模型(CSS justify-content 属性) - 代码案例 效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
- html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...
- CSS flex布局
1. 介绍 1.1 说明 flex布局,也称为flex弹性布局:主要目的是使item的宽度.高度按一定顺序填充父容器的可用空间. 示例 注意:在下文中,将以parent指代父容器,item指代容器内的 ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"><div class=" ...
- html 布局 flex,CSS flex布局
任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行内元素也可以使用flex布局 .box{ display: inline-flex; } webkit内核的浏览 ...
- W3C推荐的新布局模式 【CSS Flex布局】详解
本文目录 概述 属性 弹性容器的属性(父级) display flex-direction flex-wrap flex-flow justify-content align-items align- ...
最新文章
- 扩展LLVM:添加指令、内部函数、类型等
- socket 读取 所有 数据 java_Java Socket 读取服务器端返回数据
- Spring定时任务的几种实现
- oracle取_后的数字,聊聊四种Oracle数字取整函数
- 图的单源最短路径:Dijkstra算法实现
- GetCurrentDirectory和SetCurrentDirectory函数
- IAsyncResult异步设计
- Spring Data Solr入门
- leetcode1491. 工资平均值 这也叫题?也太简单了吧
- linux 常用命令 杂记
- MS-Sqlserver2008建立维护计划执行备份任务
- python题目-青蛙跳井口
- bme java_为什么bme280.startreadout()只触发一次?
- 项目财务分析中的陷阱(3)(转)
- 1、零基础学工控——初识plc
- k-近邻算法 From Machine Learning
- Java 设计模式(十三):代理模式
- 天龙八部TLBB从0到1搭建教程-中
- 如何将Word默认的两页视图改为单页
- flash as3使用,播放声音和加载外部声音文件
热门文章
- 批量更改多个文件内容
- 简单ping监控脚本,并邮件报警
- 数据分析的理论与实践
- 如何隐藏video的下载按钮
- 6、Python量化交易-单均线策略升级1:T+0限制
- linux 轮巡监控进程,一种基于云平台的系统监控方法专利_专利申请于2015-01-06_专利查询 - 天眼查...
- ppt可以转换成HTML格式吗,极强PDF转换器如何将ppt转换成html网页格式
- 游戏开发中的人工智能(十三):不确定状态下的决策:贝叶斯技术
- jsp前段页面循环map取值,和获取map下标
- [874]python图片转字符串