如何在选中复选框的情况下使用jquery在传单上显示饼图？

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<input type="checkbox" id="checkbox">选中复选框显示饼图
<div id="chartContainer"></div>

$(document).ready(function() {
  $('#checkbox').change(function() {
    if ($(this).is(':checked')) {
      displayPieChart();
    } else {
      hidePieChart();
    }
  });
});

function displayPieChart() {
  // 创建饼图数据
  var data = {
    labels: ['Label 1', 'Label 2', 'Label 3'],
    datasets: [{
      data: [30, 40, 30],
      backgroundColor: ['#ff6384', '#36a2eb', '#ffce56']
    }]
  };

  // 创建饼图配置
  var options = {
    responsive: true
  };

  // 使用Chart.js创建饼图
  var ctx = document.getElementById('chartContainer').getContext('2d');
  new Chart(ctx, {
    type: 'pie',
    data: data,
    options: options
  });
}

function hidePieChart() {
  $('#chartContainer').hide();
}