如何在每次从下拉列表中选择项目时使图表动态显示？

Question

在我点击下拉列表中的一项后，您可以看到它是动态加载的。但是，在第一次加载之后，它就不再加载了。我的目标是让它在这里变得完全动态。你知道我该怎么做吗？

const ctx = document.getElementById('jobChart').getContext('2d')
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9+"],
    datasets: []
  },
});

const jobDatasets = {
  backend: [{
    label: "10th Percentile",
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    data: [0, 10, 5, 2, 20, 30, 45, 33, 67]
  }, {
    label: "25th Percentile",
    borderColor: "#645bff",
    backgroundColor: "#645bff",
    data: [5, 12, 14, 15, 19, 31, 55, 61, 62]
  }],
  frontend: [{
    label: "10th Percentile",
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    data: [35, 11, 49, 45, 55, 47, 5, 62, 1]
  }, {
    label: "25th Percentile",
    borderColor: "#645bff",
    backgroundColor: "#645bff",
    data: [10, 31, 48, 49, 59, 65, 67, 76, 12]
  }],
  fullstack: [{
    label: "10th Percentile",
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    data: [11, 37, 10, 27, 62, 52, 8, 19, 24]
  }, {
    label: "25th Percentile",
    borderColor: "#645bff",
    backgroundColor: "#645bff",
    data: [8, 25, 28, 30, 38, 45, 58, 62, 74]
  }]
}

document.getElementById('job-role').addEventListener('change', function() {
  chart.data.datasets = jobDatasets[this.value]
  chart.update()
});

Answer 1

您的代码看起来很好。我刚刚添加了一个空选项，它反映了图表的初始状态，其中尚未显示任何数据。相应地，我更改了select元素上的事件侦听器，如下所示：

document.getElementById('job-role').addEventListener('change', function() {
  chart.data.datasets = this.value == 'none' ? [] : jobDatasets[this.value];
  chart.update();
});

请看一下您修改后的代码，看看它是如何工作的。

​

const chart = new Chart('jobChart', {
  type: 'line',
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9+"],
    datasets: []
  },
});

const jobDatasets = {
  backend: [{
    label: "10th Percentile",
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    data: [0, 10, 5, 2, 20, 30, 45, 33, 67]
  }, {
    label: "25th Percentile",
    borderColor: "#645bff",
    backgroundColor: "#645bff",
    data: [5, 12, 14, 15, 19, 31, 55, 61, 62]
  }],
  frontend: [{
    label: "10th Percentile",
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    data: [35, 11, 49, 45, 55, 47, 5, 62, 1]
  }, {
    label: "25th Percentile",
    borderColor: "#645bff",
    backgroundColor: "#645bff",
    data: [10, 31, 48, 49, 59, 65, 67, 76, 12]
  }],
  fullstack: [{
    label: "10th Percentile",
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    data: [11, 37, 10, 27, 62, 52, 8, 19, 24]
  }, {
    label: "25th Percentile",
    borderColor: "#645bff",
    backgroundColor: "#645bff",
    data: [8, 25, 28, 30, 38, 45, 58, 62, 74]
  }]
};

document.getElementById('job-role').addEventListener('change', function() {
  chart.data.datasets = this.value == 'none' ? [] : jobDatasets[this.value];
  chart.update();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<b>Chart Type</b>
<select id="job-role">
  <option value="none"></option>
  <option value="backend">Backend Engineer</option>
  <option value="frontend">Frontend Engineer</option>
  <option value="fullstack">Fullstack Engineer</option>
</select>
<div style="position: relative; width:85vw">
  <canvas id="jobChart" height="110"></canvas>
</div>

​