7个使用JavaScript构建数据可视化的实用工具

7个使用JavaScript构建数据可视化的实用工具库，希望你能喜欢

avaScript运行网络。您可以在浏览器中使用它，也可以在服务器上使用它，并且可以将其用于移动应用程序。

当今的生态系统充满了强大的库和框架，可帮助工程师为任何平台构建功能强大，以用户为中心的应用程序。

甚至在Covid-19大流行之前，数据可视化就成为当今世界上最热门的话题之一。公司拥有大量数据，需要找到分析，解释和可视化数据的方法。

无论你是数据科学家还是必须处理数据可视化的程序员，今天分享7个非常棒的JavaScript框架可帮助你创建出色的解决方案。

1、 D3

地址：https://github.com/d3/d3

D3目前在GitHub上拥有90,000个star，使其成为可用的最受欢迎的JavaScript库之一。这是一个了不起的库，用于使用Web标准（SVG，Canvas，HTML）使用JavaScript可视化数据。它结合了强大的交互和可视化技术，以数据驱动的方式来操作DOM。

它允许将任意数据绑定到DOM，然后将其转换应用于文档。

主要特征：

全部功能Web标准化
支持大型数据集
提供官方和社区开发的模块

2、Three.js

地址：https://github.com/mrdoob/three.js

three.js是另一个用于数据可视化的很棒的JavaScript库，目前有大约60,000个GitHub star。它希望使用默认的WebGL渲染器创建一个易于使用，简单且轻巧的3D库。

主要特征：

默认的WebGL渲染器
支持Canvas 2D，SVG和CSS3D的渲染器
好的文档

3、Chart.js

Chart.js是面向设计人员和开发人员的简单但灵活的JavaScript图表库，目前在GitHub上拥有约50,000 star。它具有出色的文档，并且很容易入门。

主要特征：

混合图表类型
开箱即用的惊人过渡
开源项目
支持八种图表类型
反应灵敏

4、Paper.js

Paper.js是一个运行在HTML5 Canvas顶部的开源矢量图形脚本框架。它提供了许多强大的功能来创建和使用贝塞尔曲线和矢量图形。它基于Scriptographer，这是Adobe Illustrator的脚本环境。Paper.js对于初学者来说很容易学习，但对于高级用户也有很多高级功能。

主要特征：

易于上手
精心设计且经过严格考验的API
基于Scriptographer，使用HTML5标准
它提供嵌套的图层，组，路径，复合路径，栅格，符号等。

5、

Fabric.js

Fabric.js是一个很棒的JavaScript框架，可轻松使用HTML canvas元素。它在canvas元素的顶部有一个交互式对象模型，还有一个SVG到画布的解析器。

使用Fabric，您可以使用JavaScript轻松创建简单的形状，例如圆形，三角形，矩形或其他多边形。

主要特征：

单元测试
模块化架构
跨浏览器功能
快速，并遵循语义版本控制

6、ECharts

ECharts是一个功能强大的JavaScript可视化和图表库，它提供了向应用程序添加交互式，直观且高度可自定义的图表的简便方法，目前在GitHub上约有40,000星。它基于ZRender并用纯JavaScript编写。

主要特征：

Apache Software Foundation的孵化器项目
免费使用
支持多维数据分析
活跃社区
各种设备尺寸的图表

7、 Two.js

Two.js是在现代浏览器中用于二维绘图的小型API。它与渲染器无关，可使用相同的API在多个上下文（例如WebGL，Canvas2D或SVG）中进行渲染。

主要特征：

专注于矢量形状
依赖场景图
内置动画循环
具有可扩展的矢量图形解释器

最后送福利了，自己是从事了五年的前端工程师，整理了一份最全面前端学习资料，只要私信：“前端"等3秒后即可获取地址，里面概括应用网站开发，css，html，JavaScript，jQuery，Vue、Ajax，node，angular等。等多个知识点高级进阶干货的相关视频资料，等你来拿

结论

我真的希望您喜欢这些库，并且可以在您的一个项目中使用它们！

上回我们说到如何使用JavaScript配合Canvas技术实现交互功能，本片文章我们要来讲讲Canvas技术中的线条。由于它的英文名称叫做Path，所以更准确地应该叫做路径，不过其实就是线条。

Canvas技术能绘制的路径主要由直线、弧线和贝塞尔曲线构成。在画路径之前，需要调用上下文对象的beginPath()方法，结束路径的绘制需要调用上下文对象的closePath()方法，否则调用clearRect()方法时，这条路径将不会被删除。所有的画路径的操作都需要在这两行代码之中。从beginPath()到closePath()绘制的图形称为一条路径。

I. 直线

调用上下文对象的moveTo()方法，将画笔移动到该坐标，lineTo()将以直线方式设置线条的第二个点，上下文对象的stroke()方法，将会把该条路径中所有的点都按指定的方式来连接，例如以下代码就是先将画笔移动到(0,0)坐标处，然后按直线方式设置接下来的一个点(30,30)，其次把这两个点按直线方式连接起来，所以最终效果就是绘制一条斜着的直线：

我们可以修改我们上回程序中的代码，看看这些代码的效果。

通过设置上下文对象的strokeStyle和lineWidth属性可以设置线条的颜色和宽度，例如：

这段代码就设置了线条颜色为橘色、线条宽度为5像素。

通过直线，我们可以画出三角形、矩形和多边形。这里以三角形为例，我们只要指定三个能够成三角形的顶点，然后按直线方式连接起来即可，例如：

我们从(0,0)开始，绘制直线到(30,30)，然后绘制直线到(30,0)，然后在绘制直线回到起点，这就构成了一个三角形，这个三角形构成了一个封闭图形，构成封闭图形的路径可以使用上下文对象的fill()方法来对图形的内部进行填充，例如：

II. 弧线

弧线最大的用处莫过于画圆、扇形和圆角矩形了。首先，我们来介绍一下上下文对象的arc()函数。该函数用于画弧线，它有六个参数，第一、二、三个参数分别是该弧线所在圆的x、y左边和半径，第四和第五个参数是这个圆的起始角和结束角，单位为弧度，PI是180度，第六个参数是可选参数，指定是逆时针还是顺时针绘制，false代表顺时针绘制，true代表逆时针绘制，默认是顺时针绘制，不过如果画圆的话，顺时针和逆时针的效果其实差不多，因为圆无论怎么看都是一样的。

我们知道，圆的起始角是0，结束角是2PI，所以我们可以这样画圆：

画扇形，我们可以使用弧线和直线的组合，例如：

绘制圆角矩形，就要用到arcTo()函数了，它也是上下文对象的一个方法，它有五个参数分别是弧线的起点（两条线的延长线的交点）的x坐标、y坐标，弧线的终点的x、y坐标和弧线的半径，例如以下就画了一个圆角矩形的两条边和一个圆角：

再添加一些代码，那么就可以画出一个圆角矩形了，例如下述代码：

III.文本

在制作文字冒险类游戏或者RPG游戏的时候，总会有这样一种需求：在圆角矩形中输出文本，上面我们说了如何画圆角矩形，那么如何输出文本呢？我们可以使用上下文对象的strokeText()方法或者fillText()方法。区别就是前者绘制的是只有轮廓的文本，后者绘制的是填充的文本，例如：

就绘制了一个只有轮廓的文本，它的第一个参数是要绘制的文本，后两个参数是这个文本左下角的x、y坐标。和直线、弧线不同，strokeText()方法不需要放在beginPath()和closePath()之间。又如：

就绘制了一个填充文本，它的参数和strokeText()的参数是一样的。

通过设置上下文对象的fillStyle属性可以指定填充文本的颜色，设置strokeStyle属性可以设置轮廓文本的颜色。通过设置上下文对象的font属性可以设置文本的大小和字体，例如：

就设置了文本的大小为20px，字体为Arial。

关于贝塞尔曲线，敬请期待本系列的下下篇。下篇将会讲述如何使用Canvas技术画一个倒福。

盘是一个好的习惯

1、通用函数的封装！

2、flex在移动端的布局

2.2 、css使点击事件失效

pointer-events:none;

3、php常用语法的熟悉情况

https://www.runoob.com/php/php-tutorial.html

变量超过8个显示...

  <?php echo mb_strlen($userInfo['nickname'],'utf-8') > 8 ? '...':'';?>2、最多显示8个长度名字  <?php echo mb_substr($userInfo['nickname'],0,8,'utf-8')?>3、if循环格式  <?php if ($question['answer_num']=='6') {?>                    AI之星                    <?php }elseif ($question['answer_num'] >='3' && $question['answer_num'] <='5') {?>                    AI勇士                    <?php }else{?>                    AI学者                <?php }?>

最多显示8个长度名字

<?php echo mb_substr($userInfo['nickname'],0,8,'utf-8')?>

当前的时间戳

<input type="hidden" name="nowtime" value="<?php echo  time() ?>" >

if循环格式

<?php if ($question['num']=='6') {?>
    明星
    <?php }elseif ($question['num'] >='3' && $question['num'] <='5') {?>
    勇士
    <?php }else{?>
    学者
<?php }?>

foreach 循环

<?php if ($question_list) {?>
    <?php foreach ($question_list as $key=> $m): ?>
        <div class="swiper-slide item">
            <section class="question-box" data-id="<?=$m['id']?>">
                <div class="q-title"><?=$m['question']?>
                </div>
                <?php if ($m['answerList']) {?>
                    <?php foreach ($m['answerList'] as $answer_key=> $answer): ?>
                        <label class="radio-label">
                            <input type="radio" data-type="single_choice" name="<?=$m['id']?>" value="<?=$answer_key?>">
                            <?=$answer?>
                        </label>
                    <?php endforeach; ?>
                <?php }?>
            </section>
        </div>
    <?php endforeach; ?>
<?php }?>
  
 //例子2
  <select name="column_id" value="<?=isset($show_info['column_id']) ? $show_info['column_id'] : '0'?>">
    <?php foreach($column_tree as $key=> $col) {?>
        <option value="<?=$key?>" <?=($show_info['column_id']==$key) ? 'selected="selected"' : ''?>><?=$col?></option>
    <?php }?>
   </select>

Twig一些常用到的语法

//倒序排列
{{ loop.revindex }}
//

4、为了更好的兼容，点击事件写在a标签上。

5、微信网页开发

//微信网页开发分享监听
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

<script>
var param=<?=$param ?>;
    (function () {
        wx.config({
            appId: '<?=$appid ?>',
            timestamp: param.timestamp,
            nonceStr: param.noncestr,
            signature: param.signature,
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
            ]
        });
        var shareContent={
                "title": "title文案",
                "link": "<?=site_url('knowledge/index?share_id='.$share_id);?>",
                "imgUrl": "<?=site_url('/static/img/ai.png');?>",
                "desc": "文案～～～"
            },
            $jShareWrap=$('.js_share-wrap'),
            $slActiveWrap=$('.sl-active_toast-wrap'),
            $questionPage=$('#question_page'),
            $inviteMask=$('.invite-mask'),
            succFnActive=function () {        
                $.ajax({
                    url: '/knowledge/share_ins_count',
                    type: 'get',
                    success: function (r) {
                        r=JSON.parse(r);
                        console.log(r.ret);
                        $jShareWrap.removeClass('show'); 
                        $slActiveWrap.text(r.msg).show();
                        if(r.ret==0){
                            $('.result-page .again-replay').removeClass('js_share_get_count');  
                            var hreflink=$('.result-page .again-replay').attr('data-type');  
                            console.log(hreflink);                    
                            $('.result-page .again-replay').attr('href',hreflink);
                         }
                        setTimeout(function(){
                            $slActiveWrap.text('').hide();
                            // if(r.ret==0){
                            //     window.location.reload();
                            // }
                        },2000);                      
                    },
                    error: function () {
                    }
                });
            };
        wx.ready(function () {
            wx.onMenuShareTimeline({
                title: shareContent.title,
                link: shareContent.link,
                imgUrl: shareContent.imgUrl,
                desc: shareContent.desc,              
                success: function (res) {
                    console.log('pyq');
                    succFnActive();
                },
                cancel: function (res) {
                  
                }
            });

            wx.onMenuShareAppMessage({
                title: shareContent.title,
                link: shareContent.link,
                imgUrl: shareContent.imgUrl,
                desc: shareContent.desc,
                success: function () {
                    console.log('py');
                    succFnActive();
                }
            });
            wx.onMenuShareQQ({
                title: shareContent.title,
                link: shareContent.link,
                imgUrl: shareContent.imgUrl,
                desc: shareContent.desc,
                success: function () {
                    // succFn();
                }
            });
            wx.onMenuShareQZone({
                title: shareContent.title,
                link: shareContent.link,
                imgUrl: shareContent.imgUrl,
                desc: shareContent.desc,
                success: function () {
                    // succFn();
                }
            });
        });
    })();
</script>


//遇见坑
1、如果生成的签名param中的url与当前链接不一致控制台会报错。
2、shareContent中的图片等保持同域名

6、时间戳的对比

<!-- 当前时间戳 -->
<input type="hidden" name="nowtime" value="<?php echo  time() ?>" >
  
 //js 当前时间大于活动结束时间
  if (Number($('input[name="nowtime"]').val()) >=Math.round(new Date('2020-10-25 10:00:00').getTime()/1000)) {
    $('.timeEndBox').text('活动已结束，感谢。').show();
    return false;
  };

7、合成海报html2canvas.min.js

html2canvas可以通过纯JS对浏览器端进行截屏，但截图的精确度还有待提高，部分css不可识别，所以在canvas中不能完美呈现原画面样式


//实例
function convertToPoster() {
    var $posterPageContent=$('#poster_page_content');
  ///这个地方只需要将useCORS设置成true，千万不要加allowTaint:true这两个不要同时加
    html2canvas($posterPageContent[0], {useCORS: true})
        .then(
            function (canvas) {
                var oImage=new Image();
// HTMLCanvasElement.toDataURL() 
//语法：canvas.toDataURL(type, encoderOptions);
// type为图片格式，默认为 image/png；encoderOptions为图片质量，默认为0.92
                oImage.src=canvas.toDataURL('image/png', 1);
                $(oImage)
                    .addClass('poster');
                $posterPageContent
                    .after(oImage)
                    .hide();
            }
        );
};

为了更清晰的前端合并图片

<img class="copyImage" src="">
<a id="dl-hidden" style="display:none;"></a>
window.onload=function(){
    var IMAGE_URL;
    function takeScreenshot(){
        var shareContent=document.getElementById('letter');//需要截图的包裹的（原生的）DOM 对象
        var width=shareContent.offsetWidth; //获取dom 宽度
        var height=shareContent.offsetHeight; //获取dom 高度
        var canvas=document.createElement("canvas"); //创建一个canvas节点

        var scale=3; //定义任意放大倍数 支持小数
        canvas.width=width * scale; //定义canvas 宽度 * 缩放
        canvas.height=height * scale; //定义canvas高度 *缩放
        canvas.getContext("2d").scale(scale,scale); //获取context,设置scale

        // var rect=shareContent.getBoundingClientRect();//获取元素相对于视察的偏移量
        // canvas.getContext("2d").translate(-rect.left,-rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
        var opts={
            scale:scale, // 添加的scale 参数
            canvas:canvas, //自定义 canvas
            logging: true, //日志开关
            width:width, //dom 原始宽度
            height:height, //dom 原始高度
            backgroundColor: 'transparent',
        };
        html2canvas(shareContent, opts).then(function (canvas) {
            IMAGE_URL=canvas.toDataURL("image/png");
            $('.copyImage').attr('src',IMAGE_URL);
        })
    }

    function dataURLtoBlob(dataurl) {
        var arr=dataurl.split(','),
            mime=arr[0].match(/:(.*?);/)[1],
            bstr=atob(arr[1]),
            n=bstr.length,
            u8arr=new Uint8Array(n)
        while (n--) {
            u8arr[n]=bstr.charCodeAt(n)
        }
        return new Blob([u8arr], { type: mime })
    }

    function downloadBase64(dataUrl, filename) {
        var imageFile, href
        // const downloadLink=document.createElement('a')
        var downloadLink=document.getElementById('dl-hidden')
        try {
            var blob=dataURLtoBlob(dataUrl)
                var href=window.URL.createObjectURL(blob)
                downloadLink.download=filename
                downloadLink.href=href
                downloadLink.click()
        } catch (err) {
        } finally {
            if (href) {
                window.URL.revokeObjectURL(href)
            }
            // downloadLink.remove()
        }
    }
           // $(".letter-title").text('木子芳小芳');
            takeScreenshot();
            $("#save-local").click(function(e){
             downloadBase64(IMAGE_URL, 'zhengshu.png')
            })
}

8、计时器

  // 计时器
    var time_share=0;
    var timeStart=function () {
        var hour=0;
        var min=0;
        var sen=0;

        function showTime() {
             time_share ++;
            sen++;
            if (sen >=60) {
                min++;
                sen=0;
            }
            if (min >=60) {
                hour++;
                min=0;
            }
            if (hour >=12) {
                hour=0;
            }
            var dataStr="<span class='timespan'>" + (hour < 10 ? ("0" + hour) : hour) + "</span>:<span class='timespan'>" + (min < 10 ? ("0" + min) : min) + "</span>:<span class='timespan'>" + (sen < 10 ? ("0" + sen) : sen) + "</span>";
            $(".vtimeShow").html(dataStr);
        }
        setInterval(showTime, 1000);
       
    };

答题滑动轮播坑

-->答题滑动的时候，执行相关内容可以放在一个一个方法里，寻找合适时机触发
 //  答题页面的轮播交互
    var knowledgeSwiper;
    function handleStartDo() {
        knowledgeSwiper=new Swiper('.js_knowledge-swiper', {
            on: {
                //题目滑动
                slideChange: function () {
                    //slider的状态判断
                    if (knowledgeSwiper.isBeginning) {
                        $preSlider.addClass('disabled');
                    } else if (knowledgeSwiper.isEnd) {
                        $nextSlider.hide();
                        $submitPaper.show();
                    } else {
                        $preSlider.removeClass('disabled');
                        $submitPaper.hide();
                        $nextSlider.show();
                    };
                    $('#activeIndex').text(this.activeIndex + 1);
                }
            }
        });
        $('.js_pre-slider').off('click').on('click', function () {
            knowledgeSwiper.slidePrev();
        });
        $('.js_next-slider').off('click').on('click', function () {
            knowledgeSwiper.slideNext();
        });
    }; // 做题交互end

数据异步追加

//第一步--每条数据渲染的格式
function listHtmlRender(data, orderNum) {
        var htmlArr=[
            '<li>',
                '<span class="order">',
                    orderNum,
                '</span>',
                '<img src="' + data.headimgurl + '" class="avatar">',
                '<span class="nickname">',
                    data.nickname,
                '</span>',
                '<span class="time">'
                + '用时' + data.time_share + 's' +
                '</span>',
            '</li>'
        ];
        var htmlStr=htmlArr.join('');
        return htmlStr;
    };
//第二部ajax请求后的
for (var i=0; i < r.date.length; i++) {
  orderNum++;
  var listHtml=listHtmlRender(response.data[i], orderNum);
  $listBoxUl.append($(listHtml));
}

iframe适配

在线咨询

上一篇：Mac电脑如何下载、安装Vim？
下一篇：怎样用vue给视频加音乐

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

7个使用JavaScript构建数据可视化的实用工具

1、 D3

2、Three.js

3、Chart.js

4、Paper.js

5、

Fabric.js

6、ECharts

7、 Two.js

结论

1、通用函数的封装！

2、flex在移动端的布局

2.2 、css使点击事件失效

3、php常用语法的熟悉情况

Twig一些常用到的语法

4、为了更好的兼容，点击事件写在a标签上。

5、微信网页开发

6、时间戳的对比

7、合成海报html2canvas.min.js

为了更清晰的前端合并图片

8、计时器

答题滑动轮播坑

数据异步追加

iframe适配

您的项目需求