数据可视化前端技术选型（上）

短命女 2022-12-28 04:17 213阅读 0赞

# 前言 #

技术选型

--------------------

# 前端可视化解决方案 #

*  Highcharts
 *  ECharts
 *  AntV
 *  three.js(3d绘图)
 *  zrender
 *  d3（质量图绘制）
 *  Canvas
 *  Svg
 *  WebGL
 *  HTML
 *  Chrome
 *  Skia（绘图引擎）
 *  OpenGL（绘图引擎）

# Canvas入门 #

[代码地址：https://github.com/cunweizhao/MyDataV][https_github.com_cunweizhao_MyDataV]  
canvas是HTML5的新特性，它允许我们使用canvas元素在网页商米通过JavaScript绘制图像。

总结出canvas绘图的流程

*  编写canvas标签（注意指定宽高）
 *  获取canvas DOM对象
 *  获取Canvas对象
 *  设置绘图属性
 *  调用绘图API

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
        <script>
            const canvas = document.getElementById('canvas');
            //获取到Canvas对象
            const ctx = canvas.getContext('2d');
            //填充颜色
            ctx.fillStyle='red';
            //绘制矩形
            ctx.fillRect(0,0,50,50);
    
            //绘制线段
            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);//圆心： x,y,半径，起始角度，终止角度
            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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70]

# SVG入门 #

SVG是一种基于XML的图像文件格式，可以缩放的矢量图形。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </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"
            />
            
        </svg>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 1]

# WebGL #

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

# zrender #

是二维绘图引擎，它提供了Canvas,SVG,VML 等多种渲染方式，ZRender也是ECharts的渲染器  
总结zrender绘图的流程

*  引入zrender库
 *  编写div容器
 *  初始化zrender对象
 *  初始化zrender绘图对象
 *  调用zrender add 方法绘图

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script>
        <title>Title</title>
    </head>
    <body>
        <div id="container" style="width: 800px;height: 800px"></div>
        <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 circle = new
            zr.add(rect)
            zr.add(line)
            zr.add(circle)
        </script>
    </body>
    </html>

# D3 #

D3是一个Javascript图形库，基于Canvas,Svg和HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</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(){ 
            const str = 'Framework';
            p.datum(str);
            p.text(function(d,i){ 
               return `${ d}-${ i}`;
            })
        }
        function doData(){ 
            const dataset =['Vue','React','Agular'];
            p.data(dataset).test(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 #

是一个基于WebGL的Javascript 3D图形库

# canvas：图片压缩算法实现 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="file" id="upload">
        <script>
            const ACCEPT = ['image/jpg','image/png','image/jpeg'];
            const MAXSIZE= 3 * 1024 * 1024;
            const MAXSIZE_STR ='3MB';
            function convertImageToBase64(file,callback){ 
                let reader = new FileReader();
                reader.addEventListener('load',function(e){ 
                    const base64Image = e.target.result;
                    callback && callback(base64Image);
                    reader = null;
                })
                reader.readAsDataURL(file);
            }
            function compress(base64Image,callback){ 
                let maxW = 1024;
                let maxH = 1024;
                const image = new Image();
                image.addEventListener('load', function(e){ 
                    let ratio;//图片的压缩比
                    let needCompress = false;//是否需要压缩
    
                    if(maxW < image.naturalWidth){ 
                      needCompress =true;
                      ratio = image.naturalWidth / maxW;
                      maxH = image.naturalHeight /ratio;
                    }
    
                    if(maxH < image.naturalHeight){ 
                        needCompress = true;
                        ratio = image.naturalHeight / maxH;
                        maxW = image.naturalWidth / ratio;
                    }
                    /*如果不需要压缩，需要获取图片的实际尺寸*/
                    if( !needCompress){ 
                        maxW = image.naturalWidth;
                        maxH = image.naturalHeight;
                    }
                    const canvas = document.createElement('canvas');
                    canvas.setAttribute('id', '_compress_');
                    canvas.width = maxW;
                    canvas.height = maxH;
                    canvas.style.visibility = 'hidde';
                    document.body.appendChild(canvas);
                    /*进行绘图*/
                    const  ctx = canvas.getContext('2d');
                    ctx.clearRect(0,0,maxW,maxH);
                    ctx.drawImage(image,0,0,maxW,maxH);
                    const compressImage = canvas.toDataURL('image/jpeg',0.9);
                    /*当callback存在时*/
                    callback && callback(compressImage);
    
                    const _image = new Image();
                    _image.src = compressImage;
                    document.body.append(_image);
                    canvas.remove();
    
                });
                image.src=base64Image;
                document.body.appendChild(image);
            }
            function uploadToServer(compressImage){ 
                /*把图片上传到给服务器*/
                console.log('upload to server.....');
            }
            const upload = document.getElementById('upload');
            upload.addEventListener('change',function(e){ 
                const[file] = e.target.files;
                if(!file){ 
                    return;
                }
                const {  type: fileType, size: fileSize} = file;
                //图片类型检查
                //if(ACCEPT.indexOf(fileType)<0){ 
                if(!ACCEPT.includes(fileType)){ 
                    alert(`不支持【${ fileType}】文件类型!`);
                    upload.value='';
                    return;
                }
                //图片容量检查
                if(fileSize>MAXSIZE){ 
                    alert(`文件超出${ MAXSIZE_STR}!`);
                    upload.value='';
                    return;
                }
                //压缩图片
                convertImageToBase64(file, (base64Image)=>compress(base64Image,uploadToServer));
            })
        </script>
    </body>
    </html>

# G2可视化控件 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 2]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
    </head>
    <body>
        <div id="g2-chart"></div>
    <script>s
        const data =[
            { 
                year:'1991',value:'3'
            },{ 
                year:'1992',value: '4'
            }
        ]
        const chartDom = document.getElementById('g2-chart');
        const line = new G2Plot.line(chartDom,{ 
            title:{ 
                visible:true,
                text:'g2折线图实例'
            },
            description:{ 
                visible:true,
                text:'折线图实例，这是一个副标题',
                point:{ 
                    visible: true,
                    size:5,
                    color: '#fff',
                    style:{ 
                       stroke :'#fe740c',
                        lineWidth:2,
                        fillOpacity:0.6
                    }
                },
                label:{ 
                    visible:true
                },
                color:'#f2740c',
                yAxis:{ 
                    formatter:(v) =>{ 
                        return `${ v}k`;
                    }
                }
            }
            // data,
            // xFiled:'year',
            // yFiled:'value'
        });
        line.render();
    </script>
    </body>
    </html>

#  #

[https_github.com_cunweizhao_MyDataV]: https://github.com/cunweizhao/MyDataV
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70]: /images/20221120/6a1c5b96159e455b85b291593236af18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201214165736441.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020121817213344.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz,size_16,color_FFFFFF,t_70