在网页中添加表单组件，要求用户输入统计数据，根据用 户数据绘制相应的饼状图和柱状图。 1.要求对用户输入进行有效性验证; 2.通过点击按钮绘制饼状图或柱状图; 3.饼状图和柱状图要有数据标注。

在网页中添加表单组件让用户输入统计数据并创建动态图表的过程一般会涉及以下几个步骤：

1. **表单设计**：
创建一个包含文本框、下拉菜单或其他必要的字段的表单，以便用户输入数据。例如，可以有数据点的数量、每个点对应的百分比或值，以及选择图表类型（饼状或柱状）的选项。

<form id="data-form">
  <input type="number" id="points-count" placeholder="数据点数">
  <input type="text" id="percentage-data" placeholder="百分比数据">
  <select id="chart-type">
    <option value="pie">饼状图</option>
    <option value="bar">柱状图</option>
  </select>
  <button type="submit">绘制图表</button>
</form>

2. **数据验证**：
使用JavaScript处理表单提交事件，检查输入的有效性。比如检查数字是否有效，百分比是否在0-100之间，确保图表类型已选择等。

document.getElementById('data-form').addEventListener('submit', function(e) {
  e.preventDefault();
  // 数据验证逻辑...
});

3. **图表绘制**：
用户点击按钮后，根据选择的图表类型（`chart-type`）动态加载相应的库（如Chart.js），并在用户提供的数据基础上绘制图表。饼状图和柱状图的标注通常由库内的API自动生成，也可以手动添加。

function drawChart() {
  const chartType = document.getElementById('chart-type').value;
  const pointsCount = document.getElementById('points-count').value;
  // ...

  if (chartType === 'pie') {
    // 绘制饼状图，并添加数据标注
  } else if (chartType === 'bar') {
    // 绘制柱状图，并添加数据标注
  }
}

记得在实际项目中，为了增强用户体验，还可以提供实时预览功能，让用户看到输入的数据如何影响图表。