Javascript ChartJS基于下拉选择更改显示的数据

我正在从事一个项目，该项目使用ChartJS显示线条图，以显示基于所选团队或人员的比较数据

以下是HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

<div class="compare-team-summary-container">

  <div id="compare-team-sales">

    <div class="title-selection-container">
      <div class="compare-main-title">
        COMPARE TEAM SALES
        <br>
        <span>1/1 - 1/7</span>
      </div>
      <div class="team-selection-container">
        <select class="team-one">
          <option value="Sample One">Sample One</option>
          <option value="Person Two">Person Two</option>
          <option value="Individual Three">Individual Three</option>
          <option value="Option Four">Option Four</option>
        </select>
        <select class="team-two">
          <option value="Sample 1A">Sample 1A</option>
          <option value="Option Two">Option Two</option>
          <option value="Person Three">Person Three</option>
          <option value="Individual Four">Individual Four</option>
        </select>
      </div>
      <div class="clear"></div>
    </div>

    <div class="sales-team-graphs">
      <canvas id="myChart"></canvas>
    </div>
  </div>

</div>

还有JavaScript

Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.enabled = false;

var ctx = document.getElementById('myChart').getContext('2d');

Chart.defaults.global.responsive = true;

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
    datasets: [{
      lineTension: 0,
      label: 'sample one',
      data: [50403, 28403, 30309, 60987, 34876, 22987, 10890, 46734],
      backgroundColor: "rgba(125, 209, 255, 0.77)"

    }, {
      lineTension: 0,
      label: 'sample 1a',
      data: [32403, 42403, 66403, 28906, 44878, 37890, 12978, 39865],
      backgroundColor: "rgba(48, 62, 123, 1)"
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
          display: false,
          min: 0,
          max: 110000,
          fixedStepSize: 10000
        }
      }],
      xAxes: [{
        ticks: {
          display: false
        }
      }],
    },
    elements: {
      point: {
        radius: 0
      }
    },
    scaleShowLabels: false,
  }
});

这是小提琴：

我不知道如何只显示两个相同颜色的图形进行比较，并在下拉选择器中绑定以切换该信息

---

任何帮助都将不胜感激

在每个选项上尝试“更改”事件，该事件为所选选项加载适当的数据，从数据集中删除现有数据，并将新数据推送到数据集中

        $('.team-one').change(function () {
          var sel = $(this).val();
          var newData = [];
          switch(sel) {
            case 'Person Two':
              newData = ['insert data for Person Two'];
              myChart.datasets[0].data.length = 0;
              myChart.datasets[0].data.push.apply(
                myChart.datasets[0].data, newData);
              break;
            case 'Individual Three':
//structure as above with data for Individual Three
              break;
           case 'Person Four':
//structure as above with data for Person Four
              break;
            default:
//structure as above with data for Sample One
          }
          myChart.update();
        });

        $('.team-one').change(function () {
          var sel = $(this).val();
          var newData = [];
          switch(sel) {
            case 'Person Two':
              newData = ['insert data for Person Two'];
              myChart.datasets[0].data.length = 0;
              myChart.datasets[0].data.push.apply(
                myChart.datasets[0].data, newData);
              break;
            case 'Individual Three':
//structure as above with data for Individual Three
              break;
           case 'Person Four':
//structure as above with data for Person Four
              break;
            default:
//structure as above with data for Sample One
          }
          myChart.update();
        });