javascript - ChartJS 根据下拉选择更改显示的数据

Question

我正在从事一个元素，该元素使用 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>

CSS..

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  color: #ffffff;
  font-size: 16px;
  line-height: 28px;
  font-family: 'Lato', 'Oswald', 'Open Sans', sans-serif;
}

.clear {
  clear: both;
}

.compare-team-summary-container {
  color: #797979;
  text-align: center;
  margin: 10px 20px 50px 20px;
}

.compare-team-summary-container #compare-team-sales {
  background: #ffffff;
  padding: 15px 20px;
  border-radius: 4px;
  margin: 5px 10px 10px;
  text-align: left;
  width: 700px;
  height: 400px;
  display: inline-block;
  vertical-align: top;
}

.compare-team-summary-container #compare-team-sales .title-selection-container {
  margin-bottom: 30px;
  padding-bottom: 16px;
  border-bottom: 1px #dedede solid;
}

.compare-team-summary-container #compare-team-sales .title-selection-container .compare-main-title {
  font-weight: bold;
  line-height: 24px;
  float: left;
}

.compare-team-summary-container #compare-team-sales .title-selection-container .compare-main-title span {
  font-size: 14px;
}

.compare-team-summary-container #compare-team-sales .title-selection-container .team-selection-container {
  float: right;
  margin-top: 10px;
}

.compare-team-summary-container #compare-team-sales .title-selection-container .team-selection-container .team-one {
  background: transparent;
  border: 0;
  border-radius: 3px;
  width: 220px;
  height: 36px;
  padding: 0 10px;
  margin-top: -3px;
  font-size: 13px;
  color: #ffffff;
  margin-right: 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../images/icons/down-chevron-white.png) 96% / 6% no-repeat #5da7e4;
  cursor: pointer;
}

.compare-team-summary-container #compare-team-sales .title-selection-container .team-selection-container .team-one option {
  background: transparent;
  border: 0;
  border-radius: 3px;
  width: 220px;
  height: 36px;
  padding: 0 10px;
  margin-top: -3px;
  font-size: 13px;
  color: #ffffff;
  margin-right: 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #5da7e4;
  cursor: pointer;
}

.compare-team-summary-container #compare-team-sales .title-selection-container .team-selection-container .team-two {
  background: transparent;
  border: 0;
  border-radius: 3px;
  width: 220px;
  height: 36px;
  padding: 0 10px;
  margin-top: -3px;
  font-size: 13px;
  color: #ffffff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../images/icons/down-chevron-white.png) 96% / 6% no-repeat #303e7b;
  cursor: pointer;
}

.compare-team-summary-container #compare-team-sales .sales-team-graphs {
  height: 350px;
  margin-top: -99px;
}

和 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,
  }
});

这是 fiddle : https://jsfiddle.net/antondaniels/c34uo667/3/

我无法弄清楚如何只显示 2 个图表以进行相同颜色的比较，并绑定(bind)下拉选择器来切换该信息。

如有任何帮助，我们将不胜感激!

Answer 1

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

        $('.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();
        });