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

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

你的代码看起来不错。 我刚刚添加了一个空选项，它反映了尚未显示数据的图表的初始 state。 因此，我更改了 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>