使用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

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

猜你喜欢