Canvas饼图无法渲染用户输入数据的问题求助

你的饼图无法显示的核心问题是计算百分比时的数组访问错误，咱们来一步步排查和修正：

关键错误分析 #

在你的draw()函数里，计算百分比的代码行写错了：

var percent = values[ i ][ 1 ] * 100 / total;

这里的values是从用户输入分割得到的一维数组（比如输入10,20,30会得到["10","20","30"]，转成整数后是[10,20,30]），根本不存在values[i][1]这个二维索引，这会导致percent变成NaN，后续的弧度计算全部失效，自然画不出任何图形。

修正后的完整代码 #

JavaScript部分（pie.js） #

function draw() { 
  var n = document.getElementById("data").value; 
  var values = n.split(","); 
  var colors = [ "blue", "red", "yellow", "green", "black" ]; 
  var canvas = document.getElementById( "myCanvas"); 
  var context = canvas.getContext( "2d" ); 

  // 清空画布（避免重复绘制叠加）
  context.clearRect(0, 0, canvas.width, canvas.height);
  // 绘制灰色背景
  context.fillStyle = "rgb(200,200,200)"; 
  context.fillRect (0, 0, canvas.width, canvas.height); 

  // 处理输入数据：转整数+去除空格+过滤无效值
  var validValues = [];
  for( var i = 0; i < values.length; i++ ){ 
    var num = parseInt(values[i].trim());
    if (!isNaN(num) && num > 0) {
      validValues.push(num);
    }
  }

  var dataLength = validValues.length; 
  if (dataLength === 0) {
    alert("请输入有效的正整数，用逗号分隔");
    return;
  }

  // 计算总和
  var total = 0; 
  for( var i = 0; i < dataLength; i++ ){ 
    total += validValues[ i ]; 
  }

  if (total === 0) {
    alert("输入的数值总和不能为0");
    return;
  }

  var x = canvas.width / 2; // 把饼图放在画布中心更美观
  var y = canvas.height / 2; 
  var radius = Math.min(x, y) - 20; // 自适应半径，避免超出画布
  var startingPoint = 0; 

  for( var i = 0; i < dataLength; i++ ){ 
    // 修正：使用一维数组的元素计算百分比
    var percent = validValues[ i ] * 100 / total; 
    // 计算弧度（2π是整圆，用percent/100*2*Math.PI更直观）
    var arcAngle = (percent / 100) * 2 * Math.PI;
    var endPoint = startingPoint + arcAngle; 

    context.beginPath(); 
    // 循环使用颜色，避免颜色不足
    context.fillStyle = colors[ i % colors.length ]; 
    context.moveTo( x, y ); 
    context.arc( x, y, radius, startingPoint, endPoint ); 
    context.closePath(); // 闭合路径，确保图形完整
    context.fill(); 

    startingPoint = endPoint; 
  }
}

// 补充实现reset函数
function reset() {
  document.getElementById("data").value = "";
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  context.clearRect(0, 0, canvas.width, canvas.height);
  // 重置背景
  context.fillStyle = "rgb(200,200,200)"; 
  context.fillRect (0, 0, canvas.width, canvas.height); 
}

HTML部分 #

<html> 
<head> 
<title> Easy Graph</title> 
<link rel="stylesheet" href="stylesheet.css"> 
<style type = "text/css"> 
canvas { border: 2px solid black; } 
</style> 
<script type="text/javascript" src="pie.js"> 
</script> 
</head> 
<body> 
<h2> Pie chart </h2> 
<h2> Enter values separated by commas</h2> 
<input type="text" name="number" id="data" placeholder="例如：10,20,30"><br> 
<input type="button" value="submit" name="submit" onclick = "draw();"> 
<input type="button" value="Clear" name="Clear" onclick="reset()"><br><br> 
<canvas id ="myCanvas" width= "600" height= "300"> 
</canvas> 
</body> 
</html>

额外优化说明 #

• 修正了数组访问错误，这是饼图不显示的核心原因
• 增加了输入数据的有效性校验，过滤非数字和负数，避免报错
• 让饼图自适应画布中心，提升视觉效果
• 循环使用颜色数组，支持更多数据项
• 补充了reset函数的实现，完善功能
• 绘制前清空画布，避免多次点击提交后图形叠加

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