浏览器中实现可视化的四种方式

最新推荐文章于 2023-12-22 13:38:53 发布

~ climber ~

最新推荐文章于 2023-12-22 13:38:53 发布

阅读量1.4k

点赞数

分类专栏：可视化文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_36430673/article/details/124516341

版权

可视化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言：可视化的理解：可视化是将数据组织成易于为人所理解和认知的结构，然后用图形的方式呈现出来的理论、方法和技术。

实现可视化的四种方式：

1、html+css

一些简单的图表，可以用html和css 实现。

优点：简化开发，不需要额外引入相关的库，节省资源，提高网页打开的速度。

缺点：1、html和css 主要为网页布局而创造，虽然能实现简单的可视化图表，但是绘制的方式并不是很简单。很难看出数据与图形的对应关系。一旦图表或者数据发生改动，需要开啊重新计算，维护起来很麻烦。

2、html和css 作为浏览器渲染引擎的一部分，除了完成页面的渲染工作，还要解析HTML、SVG、CSS，构建DOM树、RenderObject树和RenderLayer树，然后用HTMl 绘制，当图形发生改变时，浏览器还要重新执行全部的工作，因此开销很大。

案例：

html+css 绘制柱状图

<style>
    
    .bargraph {
        display: grid;
        width: 150px;
        height: 100px;
        padding: 10px;
        transform: scaleY(3);
        grid-template-columns: repeat(5, 20%);
    }
    
    .bargraph div {
        margin: 0 2px;
    }
    
    .bargraph div:nth-child(1) {
        background: linear-gradient(to bottom, transparent 75%, #37c 0, #37c 85%, #3c7 0);
    }
    
    .bargraph div:nth-child(2) {
        background: linear-gradient(to bottom, transparent 74%, #37c 0, #37c 89%, #3c7 0);
    }
    
    .bargraph div:nth-child(3) {
        background: linear-gradient(to bottom, transparent 60%, #37c 0, #37c 83%, #3c7 0);
    }
    
    .bargraph div:nth-child(4) {
        background: linear-gradient(to bottom, transparent 55%, #37c 0, #37c 75%, #3c7 0);
    }
    
    .bargraph div:nth-child(5) {
        background: linear-gradient(to bottom, transparent 32%, #37c 0, #37c 63%, #3c7 0);
    }
    
    </style>

<body>
    <!-- 柱状图 -->
    <div class="bargraph">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    
</body>

2、svg

现代浏览器支持SVG。SVG 是一种基于XML语法的图像格式，它可以像普通的html标签一样，嵌入在浏览器中。

优势：相比html和css,svg 使用起来很灵活，它有自己的语法，支持不规则图形。

劣势：在渲染引擎中，svg和HTML元素一样，在输出图形元素之前，都需要经过引擎的解析，布局计算和渲染树生成。而且，一个SVG元素中表示一种基本的图形，如果数据复杂且图形量很大，同样对浏览器的开销很大。

案例：svg 实现柱状图

<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="240px" viewBox="0 0 60 100">
    <g transform="translate(0, 100) scale(1, -1)">
      <g>
        <rect x="1" y="0" width="10" height="25" fill="#37c"/>
        <rect x="13" y="0" width="10" height="26" fill="#37c"/>
        <rect x="25" y="0" width="10" height="40" fill="#37c"/>
        <rect x="37" y="0" width="10" height="45" fill="#37c"/>
        <rect x="49" y="0" width="10" height="68" fill="#37c"/>
      </g>
      <g>
        <rect x="1" y="0" width="10" height="15" fill="#3c7"/>
        <rect x="13" y="0" width="10" height="11" fill="#3c7"/>
        <rect x="25" y="0" width="10" height="17" fill="#3c7"/>
        <rect x="37" y="0" width="10" height="25" fill="#3c7"/>
        <rect x="49" y="0" width="10" height="37" fill="#3c7"/>
      </g>
    </g>
</svg>

3、canvas

canvas 元素在浏览器上创造一个空白的画布，通过提供渲染上下文，设置各种属性，然后调用绘图指令完成输出。canvas 有丰富的设置和绘图API，支持复杂的业务场景。

Canvas 能够直接操作绘图上下文，不需要经过 HTML、CSS 解析、构建渲染树、布局等一系列操作。因此单纯绘图的话，Canvas 比 HTML/CSS 和 SVG 要快得多。

缺点：但是，因为 HTML 和 SVG 一个元素对应一个基本图形，所以我们可以很方便地操作它们，比如在柱状图的某个柱子上注册点击事件。而同样的功能在 Canvas 上就比较难实现了，因为对于 Canvas 来说，绘制整个柱状图的过程就是一系列指令的执行过程，其中并没有区分“A 柱子”、“B 柱子”，这就使得在开发中很难单独对 Canvas 绘图的局部进行控制。

4、webgl

WebGL 绘制比前三种方式要复杂一些，因为 WebGL 是基于 OpenGL ES 规范的浏览器实现的，API 相对更底层，使用起来不如前三种那么简单直接。

WebGL 是浏览器提供的功能强大的绘图系统，它使用比较复杂，但是功能强大，能够充分利用 GPU 并行计算的能力，来快速、精准地操作图像的像素，在同一时间完成数十万或数百万次计算。另外，它还内置了对 3D 物体的投影、深度检测等处理，这让它更适合绘制 3D 场景。

~ climber ~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浏览器中实现可视化的四种方式

前言：可视化的理解：可视化是将数据组织成易于为人所理解和认知的结构，然后用图形的方式呈现出来的理论、方法和技术。实现可视化的四种方式：1、html+css一些简单的图表，可以用html和css 实现。优点：简化开发，不需要额外引入相关的库，节省资源，提高网页打开的速度。缺点：1、html和css 主要为网页布局而创造，虽然能实现简单的可视化图表，但是绘制的方式并不是很简单。很难看出数据与图形的对应关系。一旦图表或者数据发生改动，需要开啊重新计算，维护起来很麻烦。2、html和css
复制链接

扫一扫