来自 Chart.js 的饼图无法正常工作

Question

我是 javascript 的新手，我正在尝试制作一个 饼图来获取用户的输入。

我做了我认为正确的事情，但是图表没有出来。

当我输入变量 它无法识别我输入的代码 即使我已经使用 CDN 导入了 Chart.js，他们提供在他们的网站上。

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: {},
  };

<form class="form">

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

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

    <input type="text" id="text-box" class="first_subjects"
        placeholder="What is the first thing you would like to achieve" />

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

    <input type="text" id="text-box" class="third_subjects"
        placeholder="What is the third thing you would like to achieve" />

</form>

<button type="button" class="button" onclick="buttonClicked()">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>

Answer 1

您的代码有问题

使用类以独特的方式识别元素。
使用 getElementsByClassName 到 select 单个元素。
buttonClicked 仅 select 单击时的输入元素，不执行进一步操作。
输入元素在您的点击处理函数范围之外是未知的
你设置 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>

来自 Chart.js 的饼图无法正常工作

My Pie Chart from Chart.js is not working

javascript

charts

您的代码有问题

修补您的代码