如何使用togglebutton打开/关闭散点图中的标签

<!-- HTML部分 -->
<div id="scatterplot"></div>
<label for="toggleButton">显示标签</label>
<input type="checkbox" id="toggleButton">

<!-- JavaScript部分 -->
<script>
  // 绘制散点图的函数
  function drawScatterplot() {
    // 省略绘制散点图的代码
  }

  // 监听togglebutton状态变化的函数
  function handleToggle() {
    var toggleButton = document.getElementById("toggleButton");
    var scatterplot = document.getElementById("scatterplot");

    toggleButton.addEventListener("change", function() {
      if (toggleButton.checked) {
        // 显示散点图中的标签
        scatterplot.querySelectorAll(".label").forEach(function(label) {
          label.style.display = "block";
        });
      } else {
        // 隐藏散点图中的标签
        scatterplot.querySelectorAll(".label").forEach(function(label) {
          label.style.display = "none";
        });
      }
    });
  }

  // 页面加载完成后执行的函数
  window.addEventListener("DOMContentLoaded", function() {
    drawScatterplot();
    handleToggle();
  });
</script>