如何创建没有预定数量的子图的图形

// 创建画布
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 定义图形数据结构
var graph = [];

// 创建子图的函数
function createSubgraph(x, y, width, height) {
  var subgraph = {
    x: x,
    y: y,
    width: width,
    height: height
  };
  graph.push(subgraph);
}

// 绘制图形的函数
function drawGraph() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制每个子图
  for (var i = 0; i < graph.length; i++) {
    var subgraph = graph[i];
    
    // 绘制子图的矩形
    ctx.fillRect(subgraph.x, subgraph.y, subgraph.width, subgraph.height);
    
    // 绘制子图的文本
    ctx.fillText("Subgraph " + (i + 1), subgraph.x + 10, subgraph.y + 20);
  }
}

// 监听鼠标点击事件，创建新的子图
canvas.addEventListener("click", function(event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;
  createSubgraph(x, y, 100, 50);
  drawGraph();
});

// 初始化画布和绘制图形
canvas.width = 800;
canvas.height = 600;
ctx.font = "20px Arial";
drawGraph();