数据可视化基础了解

最新推荐文章于 2024-03-26 17:40:56 发布

Eli-sun

最新推荐文章于 2024-03-26 17:40:56 发布

阅读量211

点赞数

分类专栏： JavaScript ES6 文章标签：数据可视化

本文链接：https://blog.csdn.net/vfjcgg/article/details/121719114

版权

JavaScript 同时被 2 个专栏收录

71 篇文章 0 订阅

订阅专栏

ES6

14 篇文章 0 订阅

订阅专栏

Highcharts、ECharts、AntV用来做一些图标的绘制
three.js、zrender（其实是对Canvas做了底层封装，它也是ECharts的底层框架）、d3（它可以做一些矢量图的绘制）可以用来做一些更底层的绘制
Canvas、Svg、WebGL、HTML更底层，其实是浏览器为我们提供的默认的绘图能力
Skia（是Chrome和Android的底层2D绘图引擎）,OpenGL（是2D、3D图形渲染库，常用于CAD、VR、数据可视化和游戏）绘图引擎，其实适用C++结合硬件进行通讯实现的

canvas

这个案例是画的正方形，线段、圆和点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="800" height="800">
        <!-- 
            1.先编写一个canvas标签，注意指定宽高 
            2.获取canvas DOM对象 
            3. 获取canvas对象
            4.设置绘图属性
            5.调用绘图API
        -->

    </canvas>
    <script>
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d'); // 获取到canvas对象
        ctx.fillStyle = 'red' // 修改填充色为红色
        ctx.fillRect(0,0,50,50); // x,y轴，长度，宽度 绘制矩形

        ctx.beginPath()
        ctx.lineWidth = 1
        ctx.strokeStyle = 'blue'
        ctx.moveTo(100,100) //起点坐标
        ctx.lineTo(250,75) // 终点坐标
        ctx.lineTo(300,100) // 终点坐标
        ctx.stroke() // 绘制线段

        ctx.beginPath()
        ctx.lineWidth = 2
        ctx.strokeStyle = 'green'
        ctx.fillStyle = 'red'
        ctx.arc(200,200,50,0,2*Math.PI) // 绘制圆形的过程，坐标中心、半径、起始角度、最终角度
        ctx.stroke()
        ctx.fill()

        // 绘制一个点
        ctx.beginPath()
        ctx.lineWidth = 1
        ctx.strokeStyle = 'red'
        ctx.moveTo(300,300) //起点坐标
        ctx.lineTo(301,301) // 终点坐标
        ctx.stroke() // 绘制线段

    </script>
</body>
</html>

svg

svg是一种基于XML的图像文件格式，它是一种可缩放的矢量图形。
这个案例是画的正方形，线段、圆和点

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <svg width="800" height="800">
        <rect
        width="50"
        height="50"
        style="fill: red; stroke-width: 1px; stroke: rgb(0, 0, 0);"
         />
         <line
         x1="100"
         y1="100"
         x2="250"
         y2="75"
         style="stroke: blue; stroke-width: 1;"
         />
         <!-- 线 -->
         <line
         x1="250"
         y1="75"
         x2="300"
         y2="100"
         style="stroke: blue; stroke-width: 1;"
         />
         <!-- 圆 -->
         <circle
         cx="200"
         cy="200"
         r="50"
         stroke="green"
         stroke-width="2"
         fill="red"
         />
         <!-- 点 -->
         <line
         x1="300"
         y1="300"
         x2="301"
         y2="301"
         style="stroke: red; stroke-width: 1;"
         />

    </svg>
</body>
</html>

webGl

WebGL是一种3D绘图协议，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览区里更流畅的展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

zrender

zrender是二维绘图引擎，它提供Canvas、svg、vml等多种渲染方式。ZRender也是ECharts的渲染器。
这个案例是画的正方形，线段、圆和点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script>
</head>
<body>
    <div id="container" style="width: 800px;height: 800px;">
    </div>
    <!-- 
        1.引入zrender库
        2.编写div容器
        3.初始化zrender对象
        4.初始化zrender绘图对象
        5.调用zrender add 方法绘图
     -->
    <script>
        const zr = zrender.init(document.getElementById('container'))
        const rect = new zrender.Rect({
            shape:{
            x: 0,
            y: 0,
            width: 50,
            height: 50
        },
            style:{
                fill:'red',
                lineWidth:0
            }


        })


        const line = new zrender.Polyline({
            shape:{
                points:[
                    [100,100],
                    [250,75],
                    [300,100]
                ]
            },
            style:{
               stroke:'blue',
                lineWidth:1
            }
        })

        const circle = new zrender.Circle({
            shape:{
                cx:200,
                cy:200,
                r:50
            },
            style:{
                fill:'red',
                stroke:'green',
                lineWidth: 2
            }
        })

        const point = new zrender.Polyline({
            shape:{
                points:[
                    [300,300],
                    [301,301]
                ]
            },
            style:{
               stroke:'red',
                lineWidth:1
            }
        })
       
        zr.add(rect)
        zr.add(line)
        zr.add(circle)
        zr.add(point)

    </script>
</body>
</html>

D3
D3是一个JavaScript图形库，基于Canvas、svg和HTML。
这个案例是做了一个数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v5.js"></script>
</head>
<body>
    <p>Vue</p>
    <p>React</p>
    <p>Agular</p>
    <button id="datum">datum</button>
    <button id="data">data</button>

    <script>
        const body = d3.select('body')
        const p = body.selectAll('p')
        function dodatum(){
            console.log('1');
            const str = 'Framework'
            p.datum(str)
            p.text(function(d,i){
                console.log(d,i);
                return `${d}-${i}`
            })
        }
        function dodata(){
            const dataset = ['Vue','React','Agular']
            p.data(dataset).text(function(d,i){
                return `${d}-${i}`
            })
}
        document.getElementById('datum').addEventListener('click',function(e){
            dodatum();
        })
        document.getElementById('data').addEventListener('click',function(e){
            dodata();
        })
    </script>
</body>
</html>

Three.js

Three.js是一个基于WebGL的JavaScript 3D图形库

Eli-sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据可视化基础了解

Highcharts、ECharts、AntV用来做一些图标的绘制three.js、zrender（其实是对Canvas做了底层封装，它也是ECharts的底层框架）、d3（它可以做一些矢量图的绘制）可以用来做一些更底层的绘制Canvas、Svg、WebGL、HTML更底层，其实是浏览器为我们提供的默认的绘图能力Skia（是Chrome和Android的底层2D绘图引擎）,OpenGL（是2D、3D图形渲染库，常用于CAD、VR、数据可视化和游戏）绘图引擎，其实适用C++结合硬件进行通讯实现的can
复制链接

扫一扫