如何在TypeScript中通过下拉框仅显示图表的X轴或Y轴数据？

1. 修正HTML下拉框结构 #

原下拉框缺少<option>标签，需补充完整并为每个选项设置对应值：

<select class="dropdown" name="chartType" id="chartType" (change)="chartType($any($event.target).value)">
  <option value="">Select Axis</option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>

2. 完善TypeScript逻辑 #

实现下拉选择事件的处理方法，根据选中的轴类型更新图表，仅保留对应数据集：

// 类中声明图表实例，确保可全局访问
private chart: Chart | undefined;

// 初始化图表（补全原代码结构）
initChart() {
  // 需确保this.a、this.b已从API获取到数据后再执行此方法
  this.chart = new Chart('canvas', {
    type: 'line',
    data: {
      labels: this.a,
      datasets: [] // 初始为空，等待下拉选择后填充
    },
    options: {
      responsive: true,
      scales: {
        y: { beginAtZero: true }
      }
    }
  });
}

// 下拉选择事件处理
chartType(selectedAxis: string) {
  if (!this.chart) return;

  let targetDataset: ChartDataset<'line'>[] = [];

  if (selectedAxis === 'A') {
    targetDataset = [{
      label: 'A',
      data: this.a,
      borderWidth: 3,
      backgroundColor: 'green',
      borderColor: 'yellow'
    }];
  } else if (selectedAxis === 'B') {
    targetDataset = [{
      label: 'B',
      data: this.b,
      borderWidth: 3,
      backgroundColor: 'black',
      borderColor: 'red'
    }];
  }

  // 更新图表数据并重新渲染
  this.chart.data.datasets = targetDataset;
  this.chart.update();
}

关键说明 #

• 下拉框必须通过<option>定义选项并设置value，才能在change事件中正确获取选中的轴类型。
• 更新图表时，直接替换datasets数组为选中轴对应的单一组数据，调用chart.update()触发重新渲染。
• 需保证this.a和this.b已完成API数据获取后，再调用初始化图表的方法，避免空数组导致图表异常。

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