如何使用ChartJS实现折线图

在本文中，我们将学习如何使用Chart JS CDN库实现折线图。

折线图是一种在折线上绘制数据点的图表。它用于展示当前趋势或时间上的某些信息变化或两个数据集的比较。它通过一条线或线段连接多个点。它有助于分析或预测未来的市场和机会。

实现方法:

在HTML设计中，使用<canvas>标签显示折线图。
在代码的script部分，通过设置库的type、data和options属性来实例化ChartJS对象。
根据程序员的需求，在每个属性中设置其他必需的选项，如datasets、label、borderColor、fill、scales等。

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: 'line',            
    data: { ... },               
    options: { ... }          
});

示例 1： 下面的代码展示了一个简单的折线图示例，横轴表示一年的月份，纵轴表示一个数字数据集。

HTML

<!DOCTYPE html> 
<html> 

<head> 
    <title>Chart JS Line 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 Line Chart </h3> 

        <div> 
            <canvas id="lineChartID"></canvas> 
        </div> 
    </div> 

    <script> 

        // line chart 
        new Chart($("#lineChartID"), { 
            type: 'line', 
            data: { 
                labels: [ 
                    'January', 'February', 'March', 
                    'April', 'May', 'June', 'July' 
                ], 
                datasets: [{ 
                    label: 'My Dataset', 
                    data: [65, 71, 62, 81, 34, 55, 47 
                    ],// End data 
                    borderColor: 'green', 
                    fill: false, 
                    tension: 0.1 
                }]// End datasets 
            }// End data             
        }); 
    </script> 
</body> 

</html>

输出:

如何使用ChartJS实现折线图

示例 2： 下面的代码展示了另一个折线图示例。每个线段都使用一些辅助函数进行样式设置。数据中的空缺部分（即”skipped”）会显示为虚线，数值下降的线段则会以不同的颜色显示，如输出图片所示。

HTML

<!DOCTYPE html> 
<html> 

<head> 
    <title>Chart JS Line 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 Line Chart </h3> 

        <div> 
            <canvas id="lineChartID"></canvas> 
        </div> 
    </div> 

    <script> 
        const skipped = (ctx, value) => ctx.p0.skip 
            || ctx.p1.skip ? value : undefined; 
        const down = (ctx, value) => ctx.p0.parsed.y > 
            ctx.p1.parsed.y ? value : undefined; 

        // Setting generic options 
        const genericOptions = { 
            fill: false, 
            interaction: { 
                intersect: false 
            }, 
            radius: 0, 
        }; 

        // Setting options in a line chart 
        new Chart($("#lineChartID"), { 
            type: 'line', 
            data: { 
                labels: [ 
                    'January', 'February', 'March', 
                    'April', 'May', 'June', 'July' 
                ], 

                datasets: [{ 
                    label: 'My Dataset', 
                    data: [65, 71, 62, NaN, 34, 55, 47 
                    ],// End data 
                    borderColor: 'green', 
                    segment: { 
                        borderColor: ctx => skipped(ctx, 
                            'rgb(0,0,0,0.2)') || 
                            down(ctx, 'rgb(192,75,75)'), 
                        borderDash: ctx => skipped(ctx, [6, 6]), 
                    }, 
                    spanGaps: true 
                }]// End datasets 
            },// End data 
            options: genericOptions 
        }); 
    </script> 
</body> 

</html>

输出:

如何使用ChartJS实现折线图