如何在选中HTML下拉选项时动态更新Chart.js 3.5.1的数据集label

核心问题 #

• 配置更新路径错误：Chart.js的datasets是数组类型，你仅定义了1组数据集，需要指定索引[0]才能正确修改对应数据集的label字段，原代码直接对datasets对象赋值label不会生效
• 事件绑定兼容性问题：<option>标签的onclick事件在多数移动端浏览器和部分桌面端浏览器中不会触发，应该将事件绑定到<select>的change事件上，直接读取选中值即可

修改方案 #

1. 修复JavaScript逻辑 #

const data = {
    labels: ['Miami', 'Chicago', 'New York', 'Los Angeles', 'London', 'Paris'],
    datasets: [
        {
            label: '',
            data: [2000,1500,1000,3000,950,600],
            backgroundColor: ['red','green','yellow','blue','orange','purple']
        }
    ]
}
const config = {
    type: 'line',
    data,
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
};
function showGraph() {
    var x = document.getElementById("hideButton");
    var graph = document.getElementById("container");
    if (graph.style.display === "none" && x.style.display === "none")
    {
        x.style.display = "block";
        graph.style.display = "block";
    }
}
// 补充缺失的隐藏函数
function hideGraph() {
    document.getElementById("hideButton").style.display = "none";
    document.getElementById("container").style.display = "none";
}
const changeMyChart = new Chart(
    document.getElementById('myChart'),
    config
);
// 修复后的label更新函数
function updateTitle() {
    // 可根据需求调整label生成逻辑，示例为拼接三个下拉框的选中值
    const packageType = document.getElementById('packageType').value
    const year = document.getElementById('year').value
    const quarter = document.getElementById('quarter').value
    const labelList = []
    if(packageType !== '0') labelList.push(packageType)
    if(year !== '0') labelList.push(year)
    if(quarter !== '0') labelList.push(quarter)
    // 指定索引0修改第一个数据集的label
    changeMyChart.config.data.datasets[0].label = labelList.join(' ')
    changeMyChart.update();
}

2. 修改HTML的事件绑定 #

移除所有<option>上的onclick属性，给每个<select>添加onchange事件绑定：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<div class="card w-75 mt-2">
    <div class="card-header p-2 d-flex justify-content-center align-content-center">
        <h2>Generate Sales Report</h2>
    </div>
    <div class="card-body p-2 d-flex justify-content-center align-content-center">
        <div class="form-group mr-1">
            <label for="packageType" class="form-text text-white ml-4"><b>Select Package Type</b></label>
            <!-- 新增onchange绑定 -->
            <select id="packageType" class="custom-select m-1" onchange="updateTitle()">
                <option value="0">Select Package Type</option>
                <option value="Air">Air</option>
                <option value="Cruise">Cruise</option>
                <option value="Ground">Ground</option>
            </select>
        </div>
        <div class="form-group ml-2">
            <label for="year" class="form-text text-white ml-4"><b>Select Year</b></label>
            <!-- 新增onchange绑定 -->
            <select class="custom-select m-1" id="year" onchange="updateTitle()">
                <option value="0">Select Year</option>
                <option value="2022">2022</option>
                <option value="2021">2021</option>
                <option value="2020">2020</option>
                <option value="2019">2019</option>
                <option value="2018">2018</option>
                <option value="2017">2017</option>
                <option value="2016">2016</option>
                <option value="2015">2015</option>
            </select>
        </div>
        <div class="form-group ml-2">
            <label for="quarter" class="form-text text-white ml-4"><b>Select Financial Quarter</b></label>
            <!-- 新增onchange绑定 -->
            <select class="custom-select m-1" id="quarter" onchange="updateTitle()">
                <option value="0">Select Financial Quarter</option>
                <option value="1">Quarter 1</option>
                <option value="2">Quarter 2</option>
                <option value="3">Quarter 3</option>
                <option value="4">Quarter 4</option>
            </select>
        </div>
    </div>
    <div class="card-footer p-2 d-flex justify-content-center">
        <button class="btn btn-primary" onclick="showGraph()">Generate Report</button>
    </div>
</div>
<div class="container bg-white" id="container" style="display: none">
    <canvas id="myChart" style="margin: 50px 50px"></canvas>
</div>
<div class="d-flex justify-content-center">
    <button class="btn btn-success justify-content-center" id="hideButton" onclick="hideGraph()" style="display: none; margin-top: 25px;">Hide Report</button>
</div>

修改完成后每次切换下拉选项，都会自动同步更新图表数据集的label。如果不需要拼接三个下拉值，只需调整updateTitle函数中的label赋值逻辑即可。

内容的提问来源于stack exchange，提问作者Adan Vivero