[英]How can I make my charts dynamic every time I choose an item from my dropdown?
after I click on one of the items in my dropdown you can see that it loads dynamically.单击下拉列表中的一项后,您可以看到它是动态加载的。 However, after it has first loaded it does not load anymore.但是,在它首次加载后,它不再加载。 My goal is to make it completely dynamic here.我的目标是让它在这里完全动态化。 Do you have an idea how I can make it happen?你知道我怎样才能让它发生吗?
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()
});
Your code looks fine.你的代码看起来不错。 I just added an empty option that reflects the initial state of the chart where no data is displayed yet.我刚刚添加了一个空选项,它反映了尚未显示数据的图表的初始 state。 Accordingly I changed the event listener on the select element as follows:因此,我更改了 select 元素上的事件侦听器,如下所示:
document.getElementById('job-role').addEventListener('change', function() {
chart.data.datasets = this.value == 'none' ? [] : jobDatasets[this.value];
chart.update();
});
Please take a look at your amended code and see how it works.请查看您修改后的代码,看看它是如何工作的。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.