使用Chart.js制作1750-2022年CO₂排放滚动折线图需求

准备工作 #

• 把annual_co_emissions_by_region.csv放在HTML文件同目录下
• 确认CSV格式：第一列是年份（覆盖1750-2022），后续列对应不同国家/地区的排放数据

步骤1：编写完整HTML结构 #

创建index.html，引入必要的库和文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CO₂排放滚动折线图</title>
    <!-- 引入Chart.js核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 引入CSV解析工具Papa Parse -->
    <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
    <!-- 引入Chart.js缩放插件，实现滚动功能 -->
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="chart-container">
        <canvas id="emissionsChart"></canvas>
    </div>
    <script src="script.js"></script>
</body>
</html>

步骤2：编写CSS样式（style.css） #

设置图表容器样式，实现横向滚动：

.chart-container {
    width: 100%;
    max-width: 1200px;
    overflow-x: auto;
    margin: 20px auto;
    padding: 10px;
}

#emissionsChart {
    height: 600px;
}

步骤3：编写JavaScript逻辑（script.js） #

完成CSV解析、数据处理和图表初始化：

// 解析本地CSV文件
Papa.parse('annual_co_emissions_by_region.csv', {
    download: true,
    header: true, // 假设CSV第一行是表头（如：年份、中国、美国...）
    complete: function(results) {
        processEmissionData(results.data);
    }
});

function processEmissionData(csvData) {
    // 1. 筛选1750-2022的年份数据
    const validYears = csvData
        .map(row => row['年份']) // 若CSV年份列是英文"Year"，替换成row['Year']
        .filter(year => year >= 1750 && year <= 2022);

    // 2. 获取所有国家/地区的名称（排除年份列）
    const regions = Object.keys(csvData[0]).filter(key => key !== '年份');

    // 3. 整理每个地区的排放数据集
    const datasets = regions.map((region, index) => {
        // 生成随机区分色
        const color = `rgba(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, 0.7)`;
        return {
            label: region,
            data: csvData
                .filter(row => row['年份'] >= 1750 && row['年份'] <= 2022)
                .map(row => parseFloat(row[region]) || 0), // 空值转0，确保数据为数字
            borderColor: color,
            backgroundColor: color.replace('0.7', '0.1'),
            fill: false,
            tension: 0.1 // 折线平滑度
        };
    });

    // 4. 初始化滚动折线图
    const ctx = document.getElementById('emissionsChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: validYears,
            datasets: datasets
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                zoom: {
                    pan: {
                        enabled: true,
                        mode: 'x' // 仅允许横向滚动
                    },
                    zoom: {
                        enabled: true,
                        mode: 'x' // 仅允许横向缩放
                    },
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: '1750-2022年各地区CO₂年度排放量'
                    }
                }
            },
            scales: {
                x: {
                    title: {
                        display: true,
                        text: '年份'
                    },
                    ticks: {
                        maxRotation: 45,
                        minRotation: 45
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'CO₂排放量'
                    },
                    beginAtZero: true
                }
            }
        }
    });
}

关键注意事项 #

• 若CSV年份列不是年份（比如是英文Year），需替换代码中所有row['年份']为对应列名
• 随机颜色可替换为固定色值，比如rgba(255, 99, 132, 0.7)
• 若CSV存在异常值，可在parseFloat(row[region])后添加额外判断逻辑

内容的提问来源于stack exchange，提问作者akaumn