如何使用ChartJS实现混合图表

在这篇文章中，我们学习如何使用JavaScript ChartJS插件实现混合图表。

混合图表也被称为组合图表。它们是两种或多种图表类型的组合，比如柱状图和折线图、列图和折线图、区域图、列图和折线图以及许多其他组合的图表类型。它们有助于在视觉上专注于数据集之间的差异，并且使得易于查看彼此之间的关系。

混合图表的用途：

可以很容易地在图表或图形中显示异常值。
能够显示不同数据集之间的关系。
数据可视化变得简单。
实现方法：
- 在HTML设计中，使用<canvas>标签来显示混合图表。
- 在代码的script部分，通过设置库的type、data和options属性来实例化ChartJS对象。
- 使用JavaScript的getContext()方法在画布上获取绘图上下文。
- 根据图表中数据集的样式需求，设置其他属性或属性。
- 根据可用于代码实现的数据，制作条形图和折线图的组合。

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： 以下代码演示了一个简单的条形图和折线图的混合图表示例。它在图表底部显示了一段时间内（一年中的月份）商品销售量的混合图表。折线图以柱状图的形式在垂直轴上展示了进行销售的顾客数量。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Chart JS Mixed 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 Bar and Line Mixed Chart </h3> 
        <div> 
            <canvas id="mixedChartID"></canvas> 
        </div> 
    </div> 

    <script> 
        var mychart = document.getElementById( 
            "mixedChartID").getContext("2d"); 
        // Mixed chart showing sales of goods 
        // over a period of time 
        new Chart(mychart, { 
            type: 'bar',             
            data: { 
                datasets: [{ 
                    label: 'Sales volume in lakhs', 
                    data: [60, 30,20,45, 50, 40], 
                    borderColor:"green", 
                    borderWidth:2                    
                    }, { 
                    label: 'no. of customers', 
                    data: [20, 10, 15, 31,40,35], 
                    type: 'line', 
                    fill:true, 
                    lineTension: 0.1, 

                }],//end data sets 
                labels: ['January', 'February', 
                    'March', 'April','May','June'] 
            }//end data          
        }); 
    </script> 
</body> 
</html>

输出:

如何使用ChartJS实现混合图表

示例2： 以下代码演示了与示例1中解释的类似的图表，但增加了另一个折线图。它展示了一个条形图，显示了以千万为单位的月度销售数据，还有两个折线图，一个是预期销售额，另一个是随着时间变化的利润曲线（一年中的月份）。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Chart JS Mixed 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 Bar and Line Mixed Chart </h3> 
        <div> 
            <canvas id="mixedChartID"></canvas> 
        </div> 
    </div> 

    <script> 
        var mychart = document.getElementById( 
            "mixedChartID").getContext("2d"); 

        new Chart(mychart, { 
            type: 'bar', 
            title: { 
                text: "Monthly Sales Data" 
            },           
            data: { 
                datasets: [{ 
                    label: 'Monthly Sales data in lakhs', 
                    data: [60, 30,20,45, 50, 40,35,77], 
                    type: 'bar', 
                    borderColor:"blue",                  
                    borderWidth:2                    
                    }, { 
                    label: 'Expected sales', 
                    data: [35, 15, 18, 38,45,35,27,65], 
                    type: 'line',    
                    borderColor:"green"                                      
                }, 
                { 
                    type:'line', 
                    data:[20,8,12,29,35,30,20,50], 
                    label: 'Profit', 
                    borderColor: "red", 
                    fill:true, 
                    backgroundColor: "pink", 
                    lineTension:0.2  

                } 
                ],//end data sets 
                labels: ['January', 'February', 'March', 'April', 
                    'May','June','July','August'] 
            }//end data          
        }); 
    </script> 
</body> 
</html>

输出:

如何使用ChartJS实现混合图表