Chart.js 的 折线图 是一种通过直线连接数据点来展示数据的可视化方式，它能够清晰地描绘出数据集在时间序列或类别分类下的趋势和模式。

语法:

let myBarChart = new Chart(ctx, {            
    type: ‘line‘,            
    data: data,            
    options: options        
});

数据集属性

在构建图表时，我们可以通过以下属性来精细控制数据集的表现：

• borderCapStyle – 线条末端的端点样式（如 INLINECODEbc4d51b5, INLINECODE0b085879, square）。
• backgroundColor – 用于填充线条区域的背景色（如果启用了填充）。
• borderColor – 定义线条本身的颜色。
• borderDash – 设置虚线的长度和间隙，例如 [5, 5]。
• borderJoinStyle – 线段连接处的样式（如 INLINECODEae02295e, INLINECODEb7c54162, miter）。
• fill – 控制如何填充线条下方的区域（布尔值或字符串，如 INLINECODEd5dd3224, INLINECODEc2f4d329, INLINECODEea64b9c8, INLINECODE2371938d）。
• showLine – 如果设置为 false，该数据集将不会绘制线条（仅显示点）。
• spanGaps – 如果设置为 INLINECODE783df3cc，线条将跨越包含空值或 INLINECODEd0ea1750 数据的点进行连接。
• options – 全局配置对象，用于配置整个图表的行为。
• Scales – 定义图表使用的坐标轴单位。

点的样式

我们也可以自定义每一个数据点的样式，使其更符合我们的设计需求：

• pointBackgroundColor – 数据点的填充颜色。
• pointBorderColor – 数据点的边框颜色。
• pointBorderWidth – 数据点边框的宽度（单位：像素）。
• pointHitRadius – 触发鼠标事件的非显示点的大小（单位：像素），用于增加交互的灵敏区域。
• pointRadius – 点的形状半径。如果设置为 0，该点将不被渲染。
• pointRotation – 点的旋转角度（单位：度）。
• pointStyle – 点的样式（如 INLINECODE896def8e, INLINECODE1430550e, INLINECODE689b1793, INLINECODEf1136555 等）。

交互效果

为了增强用户体验，Chart.js 还提供了丰富的悬停交互属性：

• pointHoverBackgroundColor – 鼠标悬停时点的背景颜色。
• pointHoverBorderColor – 鼠标悬停时点的边框颜色。
• pointHoverBorderWidth – 鼠标悬停时点的边框宽度。
• pointHoverRadius – 鼠标悬停时点的半径大小。

CDN 链接

在使用之前，我们需要引入 Chart.js 库：

https://cdn.jsdelivr.net/npm/chart.js

示例 1: 让我们看一个简单的示例，这段代码展示了如何绘制包含不同颜色和样式的折线图。

    
    
    
    
      

    
        body {
            font-family: ‘Arial‘, sans-serif;
            margin: 20px;
            text-align: center;
        }

        h1 {
            color: green;
        }

        canvas {
            border: 2px solid #858080;
        }
    





    
前端技术教程
    
折线图示例 - 简单版

    
      

    
        // 用于展示折线图的数据
        let labels = [‘一月‘, ‘二月‘, 
                      ‘三月‘, ‘四月‘, ‘五月‘];
        let dataset1Data = [10, 25, 13, 18, 30];
        let dataset2Data = [20, 15, 28, 22, 10];

        // 创建折线图
        let ctx = 
            document.getElementById(‘myLineChart‘).getContext(‘2d‘);
        let myLineChart = new Chart(ctx, {
            type: ‘line‘,
            data: {
                labels: labels,
                datasets: [
                    {
                        label: ‘实线数据 1‘,
                        data: dataset1Data,
                        borderColor: ‘blue‘,
                        borderWidth: 2,
                        fill: false,
                    },
                    {
                        label: ‘实线数据 2‘,
                        data: dataset2Data,
                        borderColor: ‘red‘,
                        borderWidth: 2,
                        fill: false,
                    },
                    {
                        label: ‘填充区域数据‘,
                        data: [15, 10, 20, 25, 12],
                        borderColor: ‘green‘,
                        borderWidth: 2,
                        fill: true,
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: ‘月份‘,
                            font: {
                                padding: 4,
                                size: 20,
                                weight: ‘bold‘,
                                family: ‘Arial‘
                            },
                            color: ‘darkblue‘
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: ‘数值‘,
                            font: {
                                size: 20,
                                weight: ‘bold‘,
                                family: ‘Arial‘
                            },
                            color: ‘darkblue‘
                        }
                    }
                }
            }
        });
    

解释：

在上述代码中，我们首先准备了三组数据。接着，我们创建了一个 INLINECODEa83349c5 类型的图表实例。在配置对象中，我们定义了 INLINECODEb08724c1（X轴标签）和 INLINECODE3864defe（数据集）。我们设置了 INLINECODE153b96bd 来区分不同的线条，并通过设置 INLINECODE177fdfa4 或 INLINECODE14c02579 来决定是否填充线条下方的区域。在 options 部分，我们自定义了 X 轴和 Y 轴的标题样式和颜色，使图表更具可读性。