使用下拉按钮更新chart.JS中的图表

<canvas id="myChart"></canvas>
<select id="dropdown">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

// 获取canvas元素
var ctx = document.getElementById('myChart').getContext('2d');

// 创建初始图表
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: '数据集1',
      data: [10, 20, 30],
      backgroundColor: ['red', 'blue', 'green']
    }]
  }
});

// 获取下拉按钮元素
var dropdown = document.querySelector('#dropdown');

// 监听下拉列表的变化
dropdown.addEventListener('change', function() {
  // 获取选中的下拉列表项的值
  var selectedOption = dropdown.value;

  // 根据选项值执行不同的操作
  if (selectedOption === 'option1') {
    // 更新图表数据
    myChart.data.labels = ['A', 'B', 'C'];
    myChart.data.datasets[0].data = [10, 20, 30];
    myChart.data.datasets[0].backgroundColor = ['red', 'blue', 'green'];
  } else if (selectedOption === 'option2') {
    // 更新图表数据
    myChart.data.labels = ['X', 'Y', 'Z'];
    myChart.data.datasets[0].data = [40, 50, 60];
    myChart.data.datasets[0].backgroundColor = ['orange', 'yellow', 'purple'];
  } else if (selectedOption === 'option3') {
    // 更新图表数据
    myChart.data.labels = ['1', '2', '3'];
    myChart.data.datasets[0].data = [70, 80, 90];
    myChart.data.datasets[0].backgroundColor = ['pink', 'gray', 'brown'];
  }

  // 更新图表
  myChart.update();
});