前端开发常见问题及数据可视化经验分享

已于 2024-06-05 20:28:38 修改
阅读量857 收藏 12
点赞数 10
文章标签： 数据可视化 css3 html5
于 2024-06-05 08:43:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40289557/article/details/139451993
版权

前端技术分享交流会

主题：前端开发常见问题及数据可视化经验分享

分享者：刘松

日期：2024-06-06

一、开发工具分享

1.Form Generator

  • form-generator是基于vue框架的Element UI表单设计及代码生成器
  • 一键生成代码，可以直接放到Vue项目中，提高开发效率
  • Form Generator Gitee仓库地址 链接地址
  • vscode配套插件-Form Generator Plugin

Form Generator

form-generator工具的使用

2.浏览器扩展插件vue-devtools

  • 用于调试 Vue 应用程序的浏览器扩展
  • 快速定位组件位置并自动打开
  • 调试数据、事件追踪、性能分析
  • 预览vuex仓库数据

vue-devtools调试工具的使用

// 如无法自动定位组件文件，需要添加额外依赖包支持
npm install launch-editor-middleware -D

const openInEditor = require('launch-editor-middleware');

module.exports = {
  devServer: {
    before (app) {
      app.use('/__open-in-editor', openInEditor('code'));
    }
  }
}

二、页面开发技巧

1.样式重置

每个浏览器都有一套自己的默认样式，使用CSS来重置浏览器的默认样式时，你将能够确保你的网页在所有浏览器中看起来更加一致

  • 使用通配符（简单粗暴，迅速实现，但影响网页性能）
* {
    margin: 0;
    padding: 0;
    border:0;
}
  • 自定义样式重置表
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a,abbr,acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}
  • 使用normalize.css（推荐使用）

2.html高度问题

  • 块级元素不设置宽高时，宽度默认是全屏宽度，高度是由子元素撑起来
  • 元素高度值为百分比时，需要向上遍历父标签要找到一个定值高度才能起作用，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用
  • 针对大屏页面或需要全屏展示的页面，需要设置html和body的高度
html, body {
    height: 100%;
}

3.margin系列问题

  • margin百分比问题
/*
	1.普通元素的百分比margin都是相对于容器宽度计算的；
	2.绝对定位的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的；
*/
.container {
    margin-left: 10%;
    margin-top: 10%;	/* 慎用 */
    padding-top: 10%;
    padding-left: 10%;	/* 慎用 */
}
  • margin塌陷问题

1.兄弟元素之间的塌陷问题

<div style="margin-bottom:30px">层1</div>
<div style="margin-top:20px">层2</div>
<!-- 
	3种解决方法：
	1.只设置层1的margin-bottom值
	2.只设置层2的margin-top值
	3.在层2那层再包裹一层，设置属性overflow:hidden
-->

在这里插入图片描述

2.父子元素之间的塌陷问题

<div class="box1">
	<div class="box2" style="margin-top: 50px">
</div>
<!-- 
	6种解决方法：
	1.给父元素添加一个透明边框；
	2.给父元素添加一个overflow: hidden
	3.给父元素添加一个position: fixed
	4.给父元素添加一个display: table
	5.将子元素的margin改为父元素的padding
	6.给子元素添加一个兄弟元素属性为content:"";overflow: hidden
-->

4.inline、inline-block元素间隙

  • img 和 iframe 等使用display为inline-block或inline布局的元素

  • 元素标签之间的不可见符号会被保留父层字体的1/3大小的空间
    在这里插入图片描述

  • 六种解决方法

<style>
    img, iframe {
        display: block; 	/* 方案一：将图片转换为块级别元素 */
    }
    img, iframe {
        vertical-align: bottom;	 /* 方案二：设置图片对齐方式 */
    }
    img, iframe {
      margin-bottom: -4px;	/* 方案三：使用负边距离 */
    }
    .parent-box {
        font-size: 0;	/* 方案四：父级盒子设置font-size: 0, 子元素需要重置font-size */
    }
    .parent-box {
        display: flex;	/* 方案五：父级盒子使用flex布局 */
    }
</style>
<!-- 方案六：标签之间没有空格或换行 -->
<img src="image1.jpg"><img src="image2.jpg">

5.CSS属性书写顺序

  • 减少浏览器reflow（回流），提升浏览器渲染dom的性能
  • 提高代码的可读性和可维护性
    在这里插入图片描述
/* 
	css书写顺序规范
	1. 位置属性(position, top, right, z-index,display, float等)
    2. 大小(width, height, padding, margin)
    3. 文字系列(font, line-height, letter-spacing, color-text-align等)
    4. 背景(background, border等)
    5. 其他(animation, transition，transform等)
*/
{
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    border-radius: 10px;
    transition: transform 0.5s linear;
 }

6.hover伪类替代mouseover

  • :hover是一个样式伪类，而mouseover是一个JavaScript事件
  • :hover伪类用于选择鼠标悬停在元素上方的元素
  • 使用:hover伪类的好处是，它不需要JavaScript就能提供视觉效果，并且可以利用CSS的过渡和动画功能
<style>
    .demo-box {
        position: relative;
        left: 0;
        top: -80px;
        transition: transform 0.5s linear;
        /* ...... */
    }
    .demo-content {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: skyblue;
    }
    .demo-box:hover {
        transform: translateY(80px);
    }
    .demo-box:hover .demo-content {
        background-color: orange;
    }
</style>
<div class="demo-box">
    <div class="demo-content"></div>
</div>

在这里插入图片描述

  • 结合:hover伪类实现一个简单的html+css三级菜单效果
    在这里插入图片描述

三、数据可视化-CSS

1.数据可视化常用的CSS属性

  • box-shadow
/* 
	h-shadow：水平阴影位移，大于0时阴影右移，小于0时阴影左移；
    v-shadow：垂直阴影位移，大于0时阴影下移，小于0是阴影上移；
    blur：可选参数，阴影模糊半径，值越大颜色越淡，阴影越模糊，为正值，默认为0；
    spread：可选参数，阴影扩散半径，值越大阴影面积越大，可正可负，默认为0；
    color：可选参数，阴影颜色，默认为黑色；
    inset：可选参数，内阴影，一般放在开头或末尾
*/
box-shadow: (inset) h-shadow v-shadow blur spread color inset;

在这里插入图片描述

  • linear-gradient、radial-gradient、conic-gradient
/* 线性渐变 */
background-image: linear-gradient([渐变的方向或角度,] 颜色1 [位置1], 颜色2 [位置2], ...);
background-image: linear-gradient(to right, blue, green 40%, red);
/* 径向渐变 */
background-image: radial-gradient([形状] [大小] [at 中心位置,] 颜色1 [位置1], 颜色2 [位置2], ...);
background-image: radial-gradient(circle closest-side at 50% 50%, red 5%, green 15%);
/* 角向渐变 */
background-image: conic-gradient([起始角度] [at 中心位置,] 颜色1 [位置1],  颜色2 [位置2], ...);
background-image: conic-gradient(from 90deg at 50% 50%, red, yellow, green);

在这里插入图片描述

  • mask

mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

mask 属性主要基于遮罩图像进行操作，通过将遮罩图像应用于元素的内容部分来达到蒙版效果。遮罩图像可以是一张图片、一个渐变或者一个 SVG 矢量图形，即可应用于 CSS background 的属性值。

mask: url(mask.png);                       	/* 使用位图来做遮罩 */
mask: url(masks.svg#star);                 	/* 使用 SVG 图形中的形状来做遮罩 */
mask: linear-gradient(transparent, #fff); 	/* 渐变背景，这里的#fff换成任意颜色均可 */
/* 以下案例是使用渐变+蒙版遮罩实现简单的圆环进度条 */
.ring-chart {
  width: 200px;
  height: 200px;
  background: conic-gradient(transparent 0%, #2ec4a7 100%);
  /* 此写法圆环边缘有锯齿 */
  mask: radial-gradient(closest-side circle, transparent 50%, #000 50% 100%, transparent 100%);
}
/* 边缘锯齿优化，这里的#000可以替换成任意非透明颜色，不影响使用效果 */
mask: radial-gradient(closest-side circle, transparent 50%, #000 51% 99%, transparent 100%);

在这里插入图片描述

  • clip-path

clip-path 是一个css属性，允许开发者创建一个剪切区域，从而决定元素的哪些部分可见，哪些部分会被隐藏。通过定义这个剪切路径（clipping path），您可以创造出非矩形的裁剪形状，使元素内容按特定的几何形状展示

CSS3剪切路径（clip-path）在线生成器

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
/* 以下案例为使用clip-path实现图形裁剪 */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);  /* 裁剪三角形 */
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 裁剪菱形 */
/* 裁剪五角星 */
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

在这里插入图片描述

  • transform
/* 水平移动 */
transform: translate(200px, 100px);
/* 扩大缩小 */
transform: scale(1.5);
/* 旋转 */
transform: rotate(45deg);
/* 倾斜变形 */
transform: skew(30deg);

在这里插入图片描述

  • transition

允许元素从一种样式状态平滑地改变为另一种样式状态。这种变化通常会在一段时间内完成，而不是立即生效。

transition可以应用于大多数CSS属性，包括但不限于颜色、尺寸、位置等

.chart-pointer {
  transform: var(--pointer-rotate);
  transition: transform 1s linear;
}

在这里插入图片描述

  • animation

使元素从一种样式逐渐变化为另一种样式的效果

animation: move 1s infinite 动画的第一部分，用于描述动画的各个规则;

@keyframes move {} 动画的第二部分，用于指定动画开始、结束以及中间点样式的关键帧;

在这里插入图片描述

2.案例剖析及讲解

/* 序号1 */
border-radius: 50%;
background-color: #fbedea;
background-image: conic-gradient(#d5f4ee 0%, #2ec4a7 88.88%, transparent 88.88%);
/*  序号2	  mask和background-color认选其一即可*/
background-color: #fff;
mask: radial-gradient(closest-side at center center, transparent 90%, #fff 90%);
border-radius: 50%
/* 序号3 */
transform-origin: center center;
transform: rotate(320deg);
/* 序号6-7 */
transform-origin: center center;
transform：rotateY(180deg)

在这里插入图片描述

3.CSS可视化案例

四、数据可视化地图-Canvas

在这里插入图片描述

1.绘制地图涉及Canvas的api

  • 填充和描边
ctx.fillStyle = '#000'		 	// 填充样式。默认值是#000000纯黑色。
ctx.fill()					   	// 填充。
ctx.lineWidth = 2				// 描边线条粗细
ctx.strokeStyle = '#000'		// 描边样式。默认值是#000000纯黑色。
ctx.stroke()				   	// 描边。
  • 绘制路径
// 绘制多边形
ctx.beginPath()			// 开始一个新路径。
ctx.moveTo(0, 0); 		// 把画笔移动到指定的坐标
ctx.lineTo(10, 50);  	// 绘制一条从当前位置到指定坐标(10, 50)的直线
ctx.lineTo(70, 25); 	// 继续从(10, 50)位置绘制到(70, 25)位置
ctx.closePath()		    // 闭合一个路径。
  • 绘制文字
// 设置文本颜色
ctx.fillStyle = '#000'
// 设置文字像素，及字体
ctx.font = "100px Microsoft YaHei"
// 填充文字(绘制的文字内容，开始绘制的x坐标，开始绘制的y坐标)
ctx.fillText('河南省', 200, 200)
// 文字描边(绘制的文字内容，开始绘制的x坐标，开始绘制的y坐标)
ctx.strokeText("河南省", 10, 90)
// 设置文字对齐的方式可选 start(默认)，end，left，right，center
ctx.textAlign = 'center'
// 设置文字对准基线的方式 值包括：top,hanging,middle, alphabetic,ideographic,bottom
ctx.textBaseline = 'top'
// 设置文字的放方向 值包括：ltr, rtl, inherit
ctx.direction = 'rtl'
  • 变换及状态管理
// 重新映射画布上的 (0, 0) 位置，此时所有坐标点都是以此为基准
ctx.translate(50, 50)

// 使用rotate、scale、translate、transform的地方务必在使用前先save()，使用结束务必restore()
ctx.save()		// 存储当前Canvas的状态。
ctx.restore()	// 恢复Canvas到前一次存储的状态。
  • 位置检测
/*
	因为Canvas整体相当于一张图片，鼠标事件并不像操作dom那么简单
	所以，鼠标交互操作一定会涉及到重绘
	先获取鼠标位置，然后重新绘制图形元素，判断鼠标位置是否位于图形元素上
*/
ctx.isPointInPath(mouseX, mouseY)		//当前点是否在指定路径内。
ctx.isPointInStroke(mouseX, mouseY)	//当前点是否在指定路径描边上。

2.地图资源及服务获取方式

DataV.GeoAtlas地理小工具系列 (aliyun.com)

GeoJSON专题 - ECharts图表集,ECharts demo集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.com

免费下载实时更新的geoJson数据、行政区划边界数据、区划边界坐标集合__HashTang (hxkj.vip)

3.基础知识了解

  • GeoJSON地图数据经纬度坐标自左至右依次递增，自上至下依次递减

  • Canvas默认坐标系为窗口坐标系，自左至右依次递增、自上至下依次递增
    在这里插入图片描述

  • GeoJSON地图数据格式，注意“MultiPolygon”与“Polygon”数据格式

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "adcode": 110000,		  	 // 行政区域编码
                "name": "北京市",			  // 行政区域名称
                "center": [					// 中心点经纬度
                    116.405285,
                    39.904989
                ],
                "level": "province",		// 层级
                "parent": {					// 父级行政区域编码
                    "adcode": 100000
                }
            },
            "geometry": {
                "type": "MultiPolygon",		// 经纬度数据集类型
                "coordinates": [			// 经纬度坐标集合
                    [
                        [
                            [
                                117.348611,
                                40.581141
                            ],
                           ......
                        ], 
                        [
                            [
                                117.348611,
                                40.581141
                            ],
                           ......
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "adcode": 150000,
                "name": "内蒙古自治区",
                "center": [
                    111.670801,
                    40.818311
                ],
                "level": "province",
                "parent": {
                    "adcode": 100000
                }
            },
            "geometry": {
                "type": "Polygon",		// 比MultiPolygon少一层，需特殊处理
                "coordinates": [
                    [
                        [
                            97.172903,
                            42.795257
                        ],
                        [
                            97.371235,
                            42.457076
                        ]
                        ......
                    ]
                ]
            }
        }
    ]
}

4.实现思路

  • 页面元素初始化（画布、提示信息、元素样式等）

  • 个性化配置项的处理（借鉴echarts的配置化方式）

  • 抓取GeoJSON格式的地图数据

  • 解析地图数据，计算包围盒、确定中心点坐标，计算地图缩放系数

  • 遍历地图数据，经纬度坐标转换屏幕坐标，结合绘图api将坐标映射到画布上

  • 各类鼠标事件的添加及响应（点击下钻，滚轮缩放、悬浮区域高亮，悬浮信息展示等）

在这里插入图片描述

5.代码结构

  • 封装地图工具类
class CanvasMap {
    constructor(options) {}
    // 初始化dom节点-创建画图和提示信息
    initDomElement(el) {}
    // 初始化各类鼠标事件
    initMouseEvent() {}
    // 默认配置参数
    defaultConfig() {}
    // 设置个性化地图参数，将传入配置和默认配置进行合并
    setOption(options) {}
    // 抓取地图GeoJSON格式数据
    getGeoAreas() {}
    // 计算包围盒，确定中心点坐标，计算地图缩放系数
    getBoxArea() {}
    // 清空画布、设置背景、绘制地图区域、标注名称
    drawMap() {}
    // 绘制地图各子区域
    drawArea() {}
    // 标注地图上的城市名称
    drawText() {}
    // 将经纬度坐标转换为屏幕坐标
    toScreenPosition(horizontal, vertical) {}
    // 窗口大小发生变化时重绘地图方法
    resize() {}
    // 鼠标悬浮提示信息
    showHoverTip() {}
    // 深拷贝
    deepCopy(result, obj) {}
    // 批量设置样式
    setStyle(obj, sty) {}
}
export default CanvasMap
  • 使用方式
// vue组件使用
import CanvasMap from "./map.js";
mounted() {
    this.myChart1 = new CanvasMap({
        el: this.$refs.mapbox1,
        callBack: (message) => { console.log(message) }	 // 接收地图事件消息
    });
    this.myChart1.setOption({tooltip:{}, geo: {}, itemStyle: {}});
}
// html使用
var myChart1 = new CanvasMap({
    el: document.getElementById('mapbox1'),
    callBack: (message) => { console.log(message) }	 // 接收地图事件消息
});
myChart1.setOption({tooltip:{}, geo: {}, itemStyle: {}});

// 其它使用方式。。。。。。

使用方式

// vue组件使用
import CanvasMap from "./map.js";
mounted() {
    this.myChart1 = new CanvasMap({
        el: this.$refs.mapbox1,
        callBack: (message) => { console.log(message) }	 // 接收地图事件消息
    });
    this.myChart1.setOption({tooltip:{}, geo: {}, itemStyle: {}});
}
// html使用
var myChart1 = new CanvasMap({
    el: document.getElementById('mapbox1'),
    callBack: (message) => { console.log(message) }	 // 接收地图事件消息
});
myChart1.setOption({tooltip:{}, geo: {}, itemStyle: {}});

// 其它使用方式。。。。。。

6.地图可视化案例

青春～不散
关注
  • 10
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【经验分享】前端分享会-地图模块、echarts以及插件分享_前端地图插件
2401_84435555的博客
05-09 318
这个时候我才注意到设计图上不只有倒影，还有第二、三层之间有竖条纹，这是3D地图的一个边缘纹理效果，所以我开始准备学习使用three.js来制作，或者ECharts GL来实现3D效果，但这次的地图所需具备的功能就只是在地图上展示一些点而已，并不要求有其他功能，所以我就想在这样一个地图上用WebGL是否有点杀鸡用牛刀，因为这就像我开始说的需要综合考虑需求来选取最合适的方案。类是一个容器，接下来提到的其他类都是被包含在其中的，最重要的一个属性就是target了，target属性设置的是地图要挂载到哪个。
大数据前端可视化大屏--前端开发之路
热门推荐
王海虎的博客
05-09 1万+
可视化常用组件有哪些？ 常用的技术栈是什么？可视化的常见问题有哪些如何解决？ 一、什么是可视化 大数据可视化这词相信大家并不陌生，从 17 世纪的地图和图形到 19 世纪初饼图的发明，使用图表来理解数据的概念已经存在了数个世纪。可视化一直伴随着我们的生活，在我们的生活中更是无处不在，像天猫双十一、女神节都各种各样的指标数据进行采集，像我们生活中的气象、交通、运维...都需要可视化。随着数字化时....
数据可视化系列-01大数据可视化基础
IT从业者的成长历程
12-29 2953
数据可视化系列-01大数据可视化基础，本文主要介绍大数据可视化基础以及常见的BI工具
前端图形视觉、可视化方面面试题
Allen_Sushi首页
01-18 1110
Echart、SVG、Canvas面试题
visual-overview:数据集的可视化概览
07-06
10. **最佳实践与案例研究**：分享实际项目中的经验和教训，提供数据可视化设计的指导原则。 通过深入学习和实践"visual-overview-master"中的内容，开发者可以提升其数据可视化能力，为数据分析报告、仪表板或数据...
75套大数据可视化界面html,可以用于开发，组件样式图表，套数挺多，哈哈
05-21
在大数据领域，可视化是至关重要的一个环节，它能够帮助我们理解和解析海量的数据，发现其中的模式、趋势和关联。...记住，良好的数据可视化是成功传达信息的关键，而这些模板正是实现这一目标的强大工具。
基于nodePPT的前端学习分享
08-10
【基于NodePPT的前端学习分享】是一份深入探讨前端开发领域的学习资源，它通过使用NodePPT这一工具，为初学者和有一定经验的开发者提供了一条清晰的学习路径。NodePPT，是基于Node.js的一个PPT制作工具，它允许...
大数据可视化HTML模板,大数据可视化html模板开源,HTML源码.zip
10-14
此外，JavaScript代码部分将揭示如何处理数据、调用可视化库、响应用户交互，这些都是前端开发的重要技能。 值得注意的是，虽然文件名称列表中提到了".rar"格式，但通常与".zip"相关联的上下文表明这可能是一个误写...
前端开源库-mt-uz
08-29
在前端开发中，这样的组合常见于将某个核心框架（如React、Vue或Angular）与特定的插件或服务进行集成，以实现特定功能，如数据可视化、路由管理、状态管理等。 "mt-uz"作为一个开源库，它提供了以下关键特性： 1....
用html+css设计一个列表清单小卡片
weixin_56334307的博客
07-05 754
这个HTML代码片段是一个简单的列表清单设计。它包含一个卡片元素（class为"card"），内部包含一个无序列表（ul），列表项（li）前面有一个特殊的符号（△）。整个卡片元素设计成300px宽，150px高，具有圆角边框和阴影效果。你可以将这段代码复制到一个HTML文件中，并在浏览器中打开以查看效果。希望这个设计能对大家的学习有所帮助！
前端面试题24（css3）
God's asylum的博客
07-08 561
回答要点：CSS Sprites 是一种将多个小图标或图像合并到一个大图像中的技术，这样可以减少 HTTP 请求次数，从而提高页面加载速度和性能。
【前端从入门到精通：第九课：CSS3新增属性及伸缩盒布局】
weixin_50556117的博客
07-09 794
flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。用于区分不同浏览器的内核，当CSS属性是实验性质的时候，可以加浏览器私有前缀，让对应浏览器兼容。align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向的对齐方式。stretch ： align-content 的默认值，各行将会伸展以占用额外的空间。既过渡的速度，方式等。
探索 WebKit 的前沿之旅：HTML5 新特性的卓越处理
2401_85342379的博客
07-07 631
WebKit 作为 HTML5 技术的重要推动者，通过其先进的处理策略和优化技术，确保了 HTML5 新特性的高效和广泛支持。本文详细介绍了 WebKit 如何处理 HTML5 的多个关键特性，并提供了实际的代码示例。开发者应当充分利用 WebKit 对 HTML5 的支持，构建功能丰富、体验卓越的 Web 应用。随着 Web 技术的不断进步，WebKit 也将持续进化，带来更多创新和优化。继续关注 WebKit 的发展，掌握最新的 Web 技术，将使你在构建现代网页和应用时更加得心应手。
HTML5使用＜details＞标签：展开/收缩信息
pan_junbiao的博客
07-06 248
details 标签提供了一种替代 JavaScript 的方法，它主要是提供了一个展开/收缩区域。details 标签中可以使用 summary 标签从属于 details 标签，单击 summary 标签中的内容文字时，details 标签中的其他所有从属元素将会展开或收缩。details 标签可以可选地接受 open 属性，以确保在页面载入时该元素是展开的。使用<details>标签实现展开/收缩信息。
HTML5实现我的音乐网站源码
xcLeigh
07-08 833
HTML5实现我的音乐网站源码，音乐网站源码，实现音乐播放，视频播放，轮播图，歌词显示，列表排列，表格表单等功能，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
简单Pysimplegui窗口的迷宫python课设
07-09
简单 PySimpleGUI 窗口的迷宫 Python 课设 概述 本课程设计旨在通过使用 PySimpleGUI 库开发一个简单的迷宫游戏，让学生熟悉 GUI 编程的基础知识，掌握迷宫生成算法，提升 Python 编程能力。PySimpleGUI 是一个易于使用的图形用户界面库，适合快速开发窗口应用。 课程目标 熟悉 PySimpleGUI 的基本使用方法：了解如何创建窗口、布局控件以及处理事件。 掌握迷宫生成算法：学习并实现常见的迷宫生成算法，如深度优先搜索 (DFS) 或递归分割法。 实现迷宫导航功能：设计并实现玩家在迷宫中导航的功能，包括处理键盘输入、绘制路径等。 提升编程能力：通过实际项目练习，增强学生的编程逻辑思维和问题解决能力。 课程设计步骤 1. 环境配置 首先，学生需要确保安装了必要的 Python 库，如 PySimpleGUI。安装过程非常简单，可以通过命令行工具安装。 2. 创建基本窗口 学生将学习如何使用 PySimpleGUI 创建一个基本的窗口界面。该窗口包含用于显示迷宫的画布和一些控制按钮。通过设计这个基本界面，学生可以理解 GUI 应用的基本结构
数字图像处理第三章二值图像.pptx
最新发布
07-10
数字图像处理第三章二值图像.pptx
前端开发中数据可视化介绍
05-27
数据可视化是将数据以图形化、直观化的方式展现出来，使人们更容易理解和分析数据的过程。在前端开发中，数据可视化可以通过图表、地图、热力图、仪表盘等形式展现数据，帮助用户更好地理解和掌握数据。 以下是常用的前端数据可视化库： 1. Echarts：一个基于JavaScript的开源可视化库，提供了多种图表类型和丰富的配置项，支持数据动态更新。 2. D3.js：一个基于JavaScript的数据可视化库，可以根据数据生成各种形式的图形，支持大量的数据可视化技术。 3. Highcharts：一个基于JavaScript的图表库，提供了多种图表类型和丰富的配置项，支持数据动态更新。 4. Chart.js：一个基于JavaScript的图表库，提供了多种图表类型和简单易用的API，适合快速构建简单的图表。 5. Three.js：一个基于WebGL的3D图形库，可以实现各种3D效果，适合构建复杂的3D数据可视化应用。 数据可视化可以帮助用户更好地理解和分析数据，提高数据分析的效率和质量，因此在前端开发中，数据可视化是非常重要的一部分。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值