ChartJS 在下拉列表功能中未显示正确数据集的问题

b1payxdu  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(171)

请帮助我解决代码的问题,当我点击下拉列表时,它应该显示每个数据集的数据,但是当我点击其他元素时,它显示了错误的值,该值应该是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谢谢!

gv8xihay

gv8xihay1#

我已经修复了这个问题。我只是在循环中有错误。

lawou6xi

lawou6xi2#

我修改了整个代码并将这些代码转换为HTML

<div class="selectBox" onchange="eventTracker()"><label>SYSTEM REQUIREMENTS</label>
        <select id="idSample">
            <option value="0, 0, 0, 0, 0, 0"></option>
            <option value="200, 0, 0, 0, 0, 0">10</option>
            <option value="0, 200, 0, 0, 0, 0">20</option>
            <option value="0, 0, 200, 0, 0, 0">30</option>
            <option value="0, 0, 0, 200, 0, 0">40</option>
            <option value="0, 0, 0, 0, 200, 0">50</option>
            <option value="0, 0, 0, 0, 0, 200">60</option>
        </select> L/s @ A MINIMUM OF 200 kPa <div class="palette purle">
        </div>

这是函数

function eventTracker() {
    firstChart.data.datasets[0].data = idSample.value.split(',');
    firstChart.update();
    firstChart.render();
}

这是我的图表

var ctx = document.getElementById('firstChart');
const firstChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['10', '20', '30', '40', '50', '60'],
        datasets: [{
            fill: false,
            label: 'System Requirements per L/s',
            data: ['0', '0', '0', '0', '0', '0'],
            backgroundColor: 'orange',
            borderColor: 'orange',
            borderWidth: 1,
            yAxisID: 'kPa',
            xAxisID: 'Lits',
        }]
    },
    options: {
        scales: {
            yAxes: [{
                id: "kPa",
                ticks: {
                    beginAtZero: true,
                    stepSize: 50
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Pressure (kPa)'
                }
            }],
            xAxes: [{
                id: "Lits",
                scaleLabel: {
                    display: true,
                    labelString: 'Flow Rate (L/s)'
                }

            }]
        },
        title: {
            display: false,
            text: "SAMPLE!"
        },
        legend: {
            display: false,
            position: 'bottom',
            labels: {
                fontColor: "#17202A",
            },
        }
    }
});

相关问题