如何使用Chart.js创建气泡图和甜甜圈图

在本文中，我们将学习如何使用Chart JS CDN库实现基本的气泡图和甜甜圈图。

气泡图和甜甜圈图：

气泡图用于同时表示3个维度的数据，展示数字变量之间的关系。
例如，它可以成为建立成本、价值和风险等关键业务变量之间关系的好工具，展示业务趋势的变化。它用于表示财务数据。
以三个维度显示数据，以获得更好的分析范围。
甜甜圈图是最常用的图表之一，它被分为多个弧段，代表每个类别数据的比例值。
每个弧段的大小表示每个类别的比例。

实现方法：

在HTML设计中，使用<canvas>标签显示气泡图或甜甜圈图。
在代码的script部分，通过设置库的type、data和options属性，实例化ChartJS对象。

CDN链接：

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js”></script>

语法：

new Chart($("#ID"), {
    type: '...',            
    data: { ... },               
    options: { ... }          
});

例子 1： 以下代码展示了使用ChartJS库创建基本气泡图的方法。。气泡的位置由前两个维度和对应的水平和垂直轴确定。第三个维度是气泡的大小。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Chart JS Bubble Chart </title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"> 
    </script> 
</head> 
<body> 
    <div> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>Chart JS Bubble Chart </h3> 
        <div> 
            <canvas id="bubbleChartID"></canvas> 
        </div> 
    </div> 
       
    <script> 
        // Bubble chart 
        new Chart($("#bubbleChartID"), { 
            type: 'bubble', 
              
            data: { 
                datasets: [{ 
                    label: 'My Dataset', 
                    data: [{ 
                            x: 35, //x value 
                            y: 45, // y value 
                            r: 25 // bubble radius in pixels 
                        }, { 
                            x: 45, 
                            y: 20, 
                            r: 20 
                        }, 
                        { 
                            x: 55, 
                            y: 30, 
                            r: 30 
                        }                         
                        ],//end data 
                    backgroundColor: 'green', 
                    pointStyle:'circle' 
                }]// End datasets 
            }// End data             
        }); 
    </script> 
</body> 
</html>

输出：

如何使用Chart.js创建气泡图和甜甜圈图

示例2： 以下代码展示了一个基本的甜甜圈图表，用于表示公司中使用各种网络技术的人数。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Chart JS Doughnut Chart </title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"> 
    </script> 
</head> 
<body> 
    <center> 
        <div> 
            <h1 style="color:green">GeeksforGeeks</h1> 
            <h3>Chart JS Doughnut Chart </h3> 
            <h4> Technology used in the company in percentage</h4> 
            <div> 
                <canvas id="doughnutChartID"></canvas> 
            </div> 
        </div> 
    <center> 
    <script> 
        // Doughnut chart 
        new Chart($("#doughnutChartID"), { 
            type: 'doughnut',             
            data: { 
                labels: [ 
                'Blockchain', 
                'PHP', 
                'Data Science'                 
                ], 
                datasets: [{ 
                    label: 'My Dataset', 
                    data: [35,45,20], 
                    backgroundColor: ['red','blue','yellow'], 
                    hoverOffset:3, 
                    hoverBorderWidth:4 
                }]//end datasets 
            }//end data             
        }); 
    </script> 
</body> 
</html>

输出：

如何使用Chart.js创建气泡图和甜甜圈图

结论： 使用ChartJS可以根据用户可用的数据实现任何类型的图表。当我们需要将数据与另一个第三维度的大小散点绘制在一起时，可以创建气泡图。这些图表有助于提供模板，为交互式可视化提供基础。甜甜圈图根据某个类别的数据显示该类别对总计贡献的比例。它是饼图的一种变体，以循环模式表示数据。每当我们需要展示数据的整体与部分之间的关系时，可以使用甜甜圈图。