我是 javascript 新手，我正在嘗試在我的網站中制作一個餅圖，以獲取用戶的輸入并將其放入餅圖中。我做了我認為正確的事情，但圖表沒有出來

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    <link rel="stylesheet" href="CSS/main-style.css" />
    
    <title>Student Planner</title>
  </head>
  <body>
    <header>
      <div class="title">
        <h1>THE STUDENT PLANNER</h1>
      </div>
      <div class="sub_header">
        <h3>A SIMPLE PLANNER TO ORGANISE YOUR TIME</h3>
        <h3>LET'S PLAN YOUR SESSION</h3>
      </div>
      
    </header>
    

    <main>
      <form class="form">
          <div>
            <input type="text" id="text-box" class="time_spend" placeholder="How much time do you have?"/>
          </div>

          <div>
            <input type="text" id="text-box" class="break_time" placeholder="how many breaks do you want to have?" /><br>
          </div>

          <div>
            <input type="text" id="text-box" class="first_subjects" placeholder="What is the first thing you would like to achieve" />
          </div>
        
          <div>
            <input type="text" id="text-box" class="second_subjects" placeholder="What is the second thing you would like to achieve?"/>
          </div>
        
          <div >
            <input type="text" id="text-box" class="third_subjects" placeholder="What is the third thing you would like to achieve" />
          </div>   
      </form>

      
        <button type="button" class="button" onclick="buttonClicked()">Finished</button>
      


      <div class="container">
          <canvas id="myChart"></canvas>
      </div>
      
    </main>

    <footer>
        <p>&copy; DK_CODE</p>
        <p>12/3/2022</p>
    </footer>
  </body>
</html>

在此處輸入影像描述在此處輸入影像描述

這是我的 javascript 檔案。當我輸入變數時，即使我已經使用 CDN 匯入了 Chart.js，它也無法識別我輸入的代碼，它們在他們的網站上提供

    //when user click on the finished button
function buttonClicked() {
  let timeSpend = document.getElementsByClassName("time_spend");
  let breakTime = document.getElementsByClassName("break_time");
  let fSubject = document.getElementsByClassName("first_subjects");
  let sSubject = document.getElementsByClassName("second_subjects");
  let tSubject = document.getElementsByClassName("third_subjects");
}

let myChart = document.getElementById('myChart').getContext('2d');

let pieChart = new Chart(myChart), {
    type:'pie',
    data: {
        labels: ['Time spend', 'Break Time', 'First Subject', 'Second Subject', 'Third Subject'],
        datasets: [
            label: 'Plan',
            data: [
                timeSpend,
                breakTime,
                fSubject,
                sSubject,
                tSubject
            ]
        ],
    },
    options: {},
};

在此處輸入影像描述

uj5u.com熱心網友回復：

您的代碼有問題

使用類以獨特的方式識別元素。
用于getElementsByClassName選擇單個元素。
buttonClicked僅在單擊時選擇輸入元素并且不執行進一步操作。
輸入元素在您的點擊處理函式范圍之外是未知的
你設定dataset陣列的方式是錯誤的。

datasets: [
            label: 'Plan',
            data: [timeSpend, breakTime, fSubject, sSubject, tSubject]
          ]

您嘗試在單擊之前繪制圖表。
您正在嘗試填充data元素參考而不是它們的值。
我認為不需要form標簽。

...

修補你的代碼

仍然無法更新圖表

let timeSpend = document.querySelector("#time_spend");
let breakTime = document.querySelector("#break_time");
let fSubject = document.querySelector("#first_subjects");
let sSubject = document.querySelector("#second_subjects");
let tSubject = document.querySelector("#third_subjects");

let myChart = document.getElementById("myChart").getContext("2d");

document.querySelector("button").addEventListener("click", () => {
    let pieChart = new Chart(myChart, {
        type: "pie",
        data: {
            labels: [
                "Time spend",
                "Break Time",
                "First Subject",
                "Second Subject",
                "Third Subject",
            ],
            datasets: [
                {
                    label: "Plan",
                    data: [
                        timeSpend.value,
                        breakTime.value,
                        fSubject.value,
                        sSubject.value,
                        tSubject.value,
                    ],
                },
            ],
        },
        options: {},
    });
});

<input type="text" id="time_spend" placeholder="How much time do you have?" />
<input type="text" id="break_time" placeholder="how many breaks do you want to have?" /><br>
<input type="text" id="first_subjects" placeholder="What is the first thing you would like to achieve" />
<input type="text" id="second_subjects" placeholder="What is the second thing you would like to achieve?" />
<input type="text" id="third_subjects" placeholder="What is the third thing you would like to achieve" />

<button type="button" class="button">Finished</button>

<div class="container">
    <canvas id="myChart"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/441669.html

標籤：javascript html

上一篇：使用useState輸入的ReactTS通用hack無法按預期作業

下一篇：ReactJS：帶有用戶陣列的登錄表單

我的Chart.js餅圖不作業

您的代碼有問題

修補你的代碼