JavaScript 系列四：

第3課 ── Chart.js 套件

by applelily

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列四：第3課 ── Chart.js 套件</title>
    <link rel="stylesheet" href="./03_js_chartjs.css">
</head>
<body>
    <div class="container">
        <div class="chart" id="chart1">
            <div class="chart-title">
                <img src="https://i.imgur.com/o5CjvkC.png" alt="Icon">
                <h4>【火水風】十年大運</h4>
            </div>
            <canvas id="chart1Canvas" data-chart-type="line" ></canvas>
        </div>
        <div class="chart" id="chart2">
            <div class="chart-title chart-title-bar">
                <img src="https://i.imgur.com/G9DJsep.png" alt="Icon">              
                <h4>2021年前十名排碳國</h4>
            </div>
            <canvas id="chart2Canvas" data-chart-type="bar" ></canvas>
        </div>
        <div class="chart" id="chart3">
            <div class="chart-title chart-title-pie">
                <img src="https://i.imgur.com/G9DJsep.png" alt="Icon"> 
                <h4>2021年排碳比例</h4>
            </div>
            <canvas id="chart3Canvas" data-chart-type="pie" ></canvas>
        </div> 
    </div>

    <!-- 引入 Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


    <script src="./03_js_chartjs.js"></script>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
body{
    background: linear-gradient(to right, #f0f0f0, #f5f5f5, #fafafa, hsl(0, 0%, 99%), #ffffff);;
}
.container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.chart {
    position: relative;
    height: 400px; 
    margin-bottom: 200px;
}

.chart-title {
    /* color: #18181deb; */
    color: #3B6F9C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 20px  0;
}

.chart-title  img {
    width: 40px; 
    height: 30px;
}

.chart-title-bar img,.chart-title-pie img{
    width: 50px;
    margin-right: 5px;
}

JavaScript

// 獲取 canvas 元素
var lineCanvas = document.getElementById('chart1Canvas');
var barCanvas = document.getElementById('chart2Canvas');
var pieCanvas = document.getElementById('chart3Canvas');

// 獲取圖表類型
var lineChartType = lineCanvas.getAttribute('data-chart-type') || 'line';
var barChartType = barCanvas.getAttribute('data-chart-type') || 'bar';
var pieChartType = pieCanvas.getAttribute('data-chart-type') || 'pie';
var lineCtx = lineCanvas.getContext('2d');
var barCtx = barCanvas.getContext('2d');
var pieCtx = pieCanvas.getContext('2d');

// 定義資料
const data_1 = [
  { year: 2024, grade: 77 },
  { year: 2025, grade: 74 },
  { year: 2026, grade: 77 },
  { year: 2027, grade: 68 },
  { year: 2028, grade: 36 },
  { year: 2029, grade: 60 },
  { year: 2030, grade: 80 },
  { year: 2031, grade: 93 },
  { year: 2032, grade: 66 },
  { year: 2033, grade: 58 },
];
const data_2 = [
  { year: 2024, grade: 85 },
  { year: 2025, grade: 82 },
  { year: 2026, grade: 59 },
  { year: 2027, grade: 57 },
  { year: 2028, grade: 81 },
  { year: 2029, grade: 84 },
  { year: 2030, grade: 83 },
  { year: 2031, grade: 71 },
  { year: 2032, grade: 70 },
  { year: 2033, grade: 86 },
];
const data_3 = [
  { year: 2024, grade: 82 },
  { year: 2025, grade: 73 },
  { year: 2026, grade: 65 },
  { year: 2027, grade: 55 },
  { year: 2028, grade: 59 },
  { year: 2029, grade: 62 },
  { year: 2030, grade: 61 },
  { year: 2031, grade: 80 },
  { year: 2032, grade: 71 },
  { year: 2033, grade: 87 },
];
const data_bar_unsorted = [
  { country: '美國', Mton_CO2e: 4752.08 },
  { country: '中國', Mton_CO2e: 12466.32 },
  { country: '德國', Mton_CO2e: 665.88 },
  { country: '歐盟27國', Mton_CO2e: 2774.93 },
  { country: '印度', Mton_CO2e: 2648.78 },
  { country: '印尼', Mton_CO2e: 602.59 },
  { country: '伊朗', Mton_CO2e: 710.83 },
  { country: '日本', Mton_CO2e: 1084.69 },
  { country: '俄羅斯', Mton_CO2e: 1942.54 },
  { country: '南韓', Mton_CO2e: 626.80 },
];

// 將 data_bar 按 Mton_CO2e 降序排序
const data_bar = data_bar_unsorted.sort((a,...