Chart.js 下拉列表动态更新数据：解决数据类型与结构不匹配问题

// 数据源
dataObjects = [
    { name: '10', rate_per_liters: '200'},
    { name: '20', rate_per_liters: '200'},
    { name: '30', rate_per_liters: '200'},
    // ... 更多数据
];

// 图表刷新函数
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;
    }
    console.log(name);
    firstChart.update();
    firstChart.render(); // render() 通常在 update() 之后不需要
}

// 优化后的数据源
const 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 }
];

function refreshChart(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 selectedObject = dataObjects.find(o => o.name === name); // 查找匹配的数据对象

        // 确保找到数据对象，避免运行时错误
        if (selectedObject) {
            firstChart.data.labels = [name];
            // 关键修正：将单个数据点封装到数组中
            firstChart.data.datasets[0].data = [selectedObject.rate_per_liters];
        } else {
            // 处理未找到数据的情况，例如清空图表或显示错误信息
            console.warn(`未找到名为 ${name} 的数据。`);
            firstChart.data.labels = [];
            firstChart.data.datasets[0].data = [];
        }
    }
    firstChart.update(); // 只需调用 update() 即可
    // firstChart.render(); // 通常不需要在 update() 之后再次调用 render()
}

<!-- HTML 结构示例 -->
<select id="operator" onchange="refreshChart(this.value)">
    <option value="All">All Datasets</option>
    <!-- 选项将由 JavaScript 动态生成 -->
</select>
<canvas id="firstChart"></canvas>

// 初始化下拉列表选项
dataObjects.forEach(o => {
    const opt = document.createElement('option');
    opt.value = o.name;
    opt.appendChild(document.createTextNode(o.name));
    document.getElementById('operator').appendChild(opt);
});

// Chart.js 初始化代码
const 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: {
        // ... 其他 Chart.js 配置
    }
});

// 确保在页面加载时，图表显示初始数据
refreshChart('All'); // 或其他默认值