如何从单选按钮中获取值并使用chart.js显示它?

k0pti3hp  于 2023-04-20  发布在  Chart.js
关注(0)|答案(1)|浏览(223)

我试图使一个马里奥卡丁车计算器.我觉得我几乎得到了它.但我似乎不能让它工作.本质上它应该计算统计数据,并显示在一个条形图.这是我得到的错误,ReferenceError:getSelectedRadioValue未定义https:dea30f85-b4db-45de-86bc-4dd63141dd32.id.repl.co/script.js:36。

<h1>Mario Kart 8 Calculator</h1>
  <div>
    <label for="character">Character:</label>
    <input type="radio" id="character0" name="character" value="0" checked>
    <label for="character0">Mario</label>
    <input type="radio" id="character1" name="character" value="1">
    <label for="character1">Luigi</label>
    <!-- Add more character options here -->
  </div>
  <div>
    <label for="body">Body:</label>
    <input type="radio" id="body0" name="body" value="0" checked>
    <label for="body0">Standard</label>
    <input type="radio" id="body1" name="body" value="1">
    <label for="body1">Pipe Frame</label>
    <!-- Add more body options here -->
  </div>
  <div>
    <label for="glider">Glider:</label>
    <input type="radio" id="glider0" name="glider" value="0" checked>
    <label for="glider0">Super Glider</label>
    <input type="radio" id="glider1" name="glider" value="1">
    <label for="glider1">Cloud Glider</label>
    <!-- Add more glider options here -->
  </div>
  <div>
    <label for="wheels">Wheels:</label>
    <input type="radio" id="wheels0" name="wheels" value="0" checked>
    <label for="wheels0">Standard</label>
    <input type="radio" id="wheels1" name="wheels" value="1">
    <label for="wheels1">Roller</label>
    <!-- Add more wheels options here -->
  </div>
  <button id="calculateBtn">Calculate</button>
  <canvas id="chartCanvas"></canvas>

这是js

// Define an object to store the stats for each character, body, glider, and wheels
var stats = {
  characters: [
    { name: 'Mario', miniTurbo: 3, acceleration: 3, speed: 4, handling: 3 },
    { name: 'Luigi', miniTurbo: 3, acceleration: 3, speed: 4, handling: 3 }
    // Add more characters here with their respective stats
  ],
  bodies: [
    { name: 'Standard', miniTurbo: 0, acceleration: 0, speed: 0, handling: 0 },
    { name: 'Pipe Frame', miniTurbo: 0, acceleration: 1, speed: 0, handling: 0 }
    // Add more bodies here with their respective stats
  ],
  gliders: [
    { name: 'Super Glider', miniTurbo: 0, acceleration: 0, speed: 0, handling: 0 },
    { name: 'Cloud Glider', miniTurbo: 1, acceleration: 0, speed: 0, handling: 0 }
    // Add more gliders here with their respective stats
  ],
  wheels: [
    { name: 'Standard', miniTurbo: 0, acceleration: 0, speed: 0, handling: 0 },
    { name: 'Roller', miniTurbo: 0, acceleration: 1, speed: 0, handling: 0 },
    { name: 'Test', miniTurbo: 0, acceleration: 0, speed: 1, handling: 0 }
    // Add more wheels here with their respective stats
  ]
};

// Get the DOM elements for the radio inputs and chart canvas
var characterRadios = document.getElementsByName('character');
var bodyRadios = document.getElementsByName('body');
var gliderRadios = document.getElementsByName('glider');
var wheelsRadios = document.getElementsByName('wheels');
var chartCanvas = document.getElementById('chartCanvas');

// Add event listener to the calculate button
document.getElementById('calculateBtn').addEventListener('click', function() {
  // Get the selected character, body, glider, and wheels
  var character = stats.characters[getSelectedRadioValue(characterRadios)];
  var body = stats.bodies[getSelectedRadioValue(bodyRadios)];
  var glider = stats.gliders[getSelectedRadioValue(gliderRadios)];
  var wheels = stats.wheels[getSelectedRadioValue(wheelsRadios)];

  // Calculate the total stats by summing up the selected options
  var totalMiniTurbo = character.miniTurbo + body.miniTurbo + glider.miniTurbo + wheels.miniTurbo;
  var totalAcceleration = character.acceleration + body.acceleration + glider.acceleration + wheels.acceleration;
  var totalSpeed = character.speed + body.speed + glider.speed + wheels.speed;
  var totalHandling = character.handling + body.handling + glider.handling + wheels.handling;

  // Create a chart using Chart.js library
  var chart = new Chart(chartCanvas, {
    type: 'bar',
    data: {
      labels: ['Mini Turbo', 'Acceleration', 'Speed', 'Handling'],
      datasets: [{
        label: 'Total Stats',
        data: [totalMiniTurbo, totalAcceleration, totalSpeed, totalHandling],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 0.2)',}]
    }
  })
})
00jrzges

00jrzges1#

您的代码不包含getSelectedRadioValue函数,因此我基于此excellent answer创建了一个。

function getSelectedRadioValue(radioGroupName) {
  return document.querySelector("input[type='radio'][name=" + radioGroupName + "]:checked").value;
}

此外,请记住,在通过绘制新图表重新使用canvas之前,每次都需要销毁任何现有图表。

if (chart) {
  chart.destroy();
}

请看一下下面修改后的可运行代码,看看它是如何工作的。

var stats = {
  characters: [
    { name: 'Mario', miniTurbo: 3, acceleration: 3, speed: 4, handling: 3 },
    { name: 'Luigi', miniTurbo: 3, acceleration: 3, speed: 4, handling: 3 }
  ],
  bodies: [
    { name: 'Standard', miniTurbo: 0, acceleration: 0, speed: 0, handling: 0 },
    { name: 'Pipe Frame', miniTurbo: 0, acceleration: 1, speed: 0, handling: 0 }
  ],
  gliders: [
    { name: 'Super Glider', miniTurbo: 0, acceleration: 0, speed: 0, handling: 0 },
    { name: 'Cloud Glider', miniTurbo: 1, acceleration: 0, speed: 0, handling: 0 }
  ],
  wheels: [
    { name: 'Standard', miniTurbo: 0, acceleration: 0, speed: 0, handling: 0 },
    { name: 'Roller', miniTurbo: 0, acceleration: 1, speed: 0, handling: 0 }
  ]
};

function getSelectedRadioValue(radioGroupName) {
  return document.querySelector("input[type='radio'][name=" + radioGroupName + "]:checked").value;
}

var chart;
document.getElementById('calculateBtn').addEventListener('click', function() {
  var character = stats.characters[getSelectedRadioValue('character')];
  var body = stats.bodies[getSelectedRadioValue('body')];
  var glider = stats.gliders[getSelectedRadioValue('glider')];
  var wheels = stats.wheels[getSelectedRadioValue('wheels')];

  var totalMiniTurbo = character.miniTurbo + body.miniTurbo + glider.miniTurbo + wheels.miniTurbo;
  var totalAcceleration = character.acceleration + body.acceleration + glider.acceleration + wheels.acceleration;
  var totalSpeed = character.speed + body.speed + glider.speed + wheels.speed;
  var totalHandling = character.handling + body.handling + glider.handling + wheels.handling;

  if (chart) {
    chart.destroy();
  }
  chart = new Chart('chartCanvas', {
    type: 'bar',
    data: {
      labels: ['Mini Turbo', 'Acceleration', 'Speed', 'Handling'],
      datasets: [{
        label: 'Total Stats',
        data: [totalMiniTurbo, totalAcceleration, totalSpeed, totalHandling],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 0.2)',}]
    }
  })
})
<script src="https://cdn.jsdelivr.net/npm/chart.js@^4"></script>
<h1>Mario Kart 8 Calculator</h1>
<div>
  <label for="character">Character:</label>
  <input type="radio" id="character0" name="character" value="0" checked>
  <label for="character0">Mario</label>
  <input type="radio" id="character1" name="character" value="1">
  <label for="character1">Luigi</label>
</div>
<div>
  <label for="body">Body:</label>
  <input type="radio" id="body0" name="body" value="0" checked>
  <label for="body0">Standard</label>
  <input type="radio" id="body1" name="body" value="1">
  <label for="body1">Pipe Frame</label>
</div>
<div>
  <label for="glider">Glider:</label>
  <input type="radio" id="glider0" name="glider" value="0" checked>
  <label for="glider0">Super Glider</label>
  <input type="radio" id="glider1" name="glider" value="1">
  <label for="glider1">Cloud Glider</label>
</div>
<div>
  <label for="wheels">Wheels:</label>
  <input type="radio" id="wheels0" name="wheels" value="0" checked>
  <label for="wheels0">Standard</label>
  <input type="radio" id="wheels1" name="wheels" value="1">
  <label for="wheels1">Roller</label>
</div>
<button id="calculateBtn">Calculate</button>
<canvas id="chartCanvas"></canvas>

相关问题