请帮助我解决代码的问题,当我点击下拉列表时,它应该显示每个数据集的数据,但是当我点击其他元素时,它显示了错误的值,该值应该是200而不是2.5。谢谢。
dataObjects.forEach(o => {
const opt = document.createElement('option');
opt.value = o.name;
opt.appendChild(document.createTextNode(o.name));
document.getElementById('operator').appendChild(opt);
console.log(opt)
});
function refreshChart(name) {
firstChart.data.labels = [name];
if (name == 'All') {
firstChart.data.labels = dataObjects.map(o => o.name),
firstChart.data.datasets[0].data = dataObjects.map(o => o.rate_per_liters);
} else {
firstChart.data.labels = [name];
firstChart.data.datasets[0].data = dataObjects.find(o => o.name == name).rate_per_liters;
// firstChart.data.datasets[0].data = dataObjects.get(o => o.name == name).push(rate_per_liters);
}
console.log(name)
firstChart.update();
firstChart.render();
}
这是我的图表代码
dataObjects = [
{ name: '10', rate_per_liters: '200'},
{ name: '20', rate_per_liters: '200'},
{ name: '30', rate_per_liters: '200'},
{ name: '40', rate_per_liters: '200'},
{ name: '50', rate_per_liters: '200'},
{ name: '60', rate_per_liters: '200'}
];
// Data1 setup
var ctx = document.getElementById('firstChart');
const firstChart = new Chart(ctx, {
type: 'bar',
data: {
labels: dataObjects.map(o => o.name),
datasets: [{
fill: false,
label: 'System Requirements per L/s',
data: dataObjects.map(o => o.rate_per_liters),
backgroundColor: 'orange',
borderColor: 'orange',
borderWidth: 1,
yAxisID: 'kPa',
xAxisID: 'Lits',
}]
},
options: {
scales: {
yAxes: [{
id: "kPa",
ticks: {
beginAtZero: true,
stepSize: 50
},
scaleLabel: {
display: true,
labelString: 'kPa'
}
}],
xAxes: [{
id: "Lits",
scaleLabel: {
display: true,
labelString: 'Liter per seconds'
}
}]
},
title: {
display: false,
text: "SAMPLE!"
},
legend: {
display: false,
position: 'bottom',
labels: {
fontColor: "#17202A",
},
}
}
});
我也会附上我的问题截图。这里〉SCREENSHOT 1SCREENSHOT 2 WITH THE ISSUE谢谢!
2条答案
按热度按时间gv8xihay1#
我已经修复了这个问题。我只是在循环中有错误。
lawou6xi2#
我修改了整个代码并将这些代码转换为HTML
这是函数
这是我的图表