使用jQuery和chart.js获取并展示气泡图

  前面的文章介绍了MongoDB的基本操作,并创建了保存有气泡图数据的集合,接着创建了WebAPI项目获取MongoDB中的数据,如下图所示。
在这里插入图片描述在这里插入图片描述
  本文在HTML页面中通过jQuery调用WebAPI获取气泡图数据,然后使用chart.js中的气泡图展示这些数据。
  网页中的关键代码如下所示,主要是通过jQuery获取数据后拼接为绘制气泡图所需的数据格式,然后调用chart类绘制图形。

        var bubbleCanvas=document.getElementById('bubbleChart');
         $(showChart).click((function()
         {
             $.getJSON("http://localhost:2001/api/BubbleData",function(data){
                     var bData = [];
 
                     for(var i=0;i<data.length;i++)
                     {
                        var arr =
                                    {
                                        "x" : data[i]["x"],
                                        "y" : data[i]["y"],
                                        "r" : data[i]["r"]
                                    }
                        bData.push(arr);
                     }

                     const data1 = {
                        datasets: [{
                            label: '气泡图数据集',
                            data: bData,
                            backgroundColor: 'rgb(255, 99, 132)'
                        }]
                        };
                var myBubbleChart = new Chart(bubbleCanvas, {
                    type: "bubble",
                    data: data1,
                    options: []
                });
            });
    }))         

  所需注意的主要有两点:
  1)跨源请求被拦截的问题,参考文献2中记录了解决办法。但如果appsettings.json中配置的url同时包含http和https路径,在Ubuntu的火狐浏览器中输入http路径会自动跳转到https路径,使用jQuery也是类似的情况,最后还是会报跨源请求被拦截的错误。本文测试时没有再去找问题解决方法,只是在url中保留了http路径,去掉了https路径。
  2)JavaScript拼凑json数组,也即准备绘制气泡图所需的数据(气泡图的每条数据都须指定x、y、r值),这个主要是从参考文献3中学习的,之前不是太清楚怎么做。
  最后是页面效果图,如下图所示:
在这里插入图片描述

参考文献:
[1]https://blog.csdn.net/gc_2299/article/details/120190971
[2]https://blog.csdn.net/gc_2299/article/details/120120952
[3]https://www.jb51.net/article/117772.htm

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值