Chart.js下拉列表数据更新问题解决方案_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Chart.js下拉列表数据更新问题解决方案

2025-10-10

浏览次数：次

返回列表

chart.js下拉列表数据更新问题解决方案

本文档旨在解决在使用Chart.js创建图表时，下拉列表选择不同选项导致图表数据不正确更新的问题。通过分析问题代码，定位错误原因，并提供修改后的代码示例，帮助开发者避免类似错误，确保图表数据的正确显示。

问题分析

原代码的主要问题在于 refreshChart 函数中，当选择非 "All" 选项时，对 firstChart.data.datasets[0].data 的赋值方式不正确。具体来说，使用了 dataObjects.find(o => o.name == name).rate_per_liters，这只会取到单个值，而 firstChart.data.datasets[0].data 期望的是一个数组。

解决方案

需要确保 firstChart.data.datasets[0].data 始终被赋值为一个数组。当选择非 "All" 选项时，应该创建一个包含单个元素的数组。

以下是修改后的 refreshChart 函数：

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 {
        // 创建包含单个元素的数组
        const selectedData = dataObjects.find(o => o.name == name);
        if (selectedData) {
            firstChart.data.labels = [name]; // 确保标签也是单个值
            firstChart.data.datasets[0].data = [selectedData.rate_per_liters];
        } else {
            console.warn(`No data found for name: ${name}`);
            // 可以选择将数据置空或者显示默认值
            firstChart.data.datasets[0].data = [];
        }
    }
    console.log(name);
    firstChart.update();
    firstChart.render();
}

代码解释：

bee餐饮点餐外卖小程序

bee餐饮点餐外卖小程序是针对餐饮行业推出的一套完整的餐饮解决方案，实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能，完美的使餐饮行业更高效便捷！功能演示：1、桌号管理登录后台，左侧菜单 “桌号管理”，添加并管理你的桌号信息，添加以后在列表你将可以看到 ID 和密钥，这两个数据用来生成桌子的二维码2、生成桌子二维码例如上面的ID为 308，密钥为 d3PiIY，那么现在去左侧菜单微信设置

3 查看详情 bee餐饮点餐外卖小程序

条件判断： 首先判断选择的 name 是否为 "All"。
"All" 选项： 如果选择 "All"，则将 firstChart.data.labels 和 firstChart.data.datasets[0].data 都设置为包含所有数据的数组。
非 "All" 选项：
- 使用 dataObjects.find 找到对应 name 的数据对象。
- 创建一个包含 rate_per_liters 的单元素数组，并将其赋值给 firstChart.data.datasets[0].data。
- 同时，确保 firstChart.data.labels 也被设置为包含单个值的数组，即当前选中的 name。
错误处理： 如果 dataObjects 中没有找到匹配 name 的数据，则输出警告信息，并且可以选择将数据置空或者显示默认值。

完整代码示例

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js Dropdown Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

    <select id="operator" onchange="refreshChart(this.value)"></select>
    <canvas id="firstChart" width="400" height="200"></canvas>

    <script>
        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'}
        ];

        // 创建下拉列表选项
        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)
        });

        // 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",
                    },
                }
            }
        });

        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 {
                // 创建包含单个元素的数组
                const selectedData = dataObjects.find(o => o.name == name);
                if (selectedData) {
                    firstChart.data.labels = [name]; // 确保标签也是单个值
                    firstChart.data.datasets[0].data = [selectedData.rate_per_liters];
                } else {
                    console.warn(`No data found for name: ${name}`);
                    // 可以选择将数据置空或者显示默认值
                    firstChart.data.datasets[0].data = [];
                }
            }
            console.log(name);
            firstChart.update();
            firstChart.render();
        }
    </script>

</body>
</html>