ChartJS通过下拉框修改时间范围失效问题求助

核心问题分析 #

你的代码存在三个关键问题导致图表异常：

• 变量作用域冲突：run()函数内声明了局部的start_value，既没修改全局的start_value，也没同步到图表配置里的timeRange.start
• 类型不匹配：下拉框返回的value是字符串类型，而timeRange.start需要数值类型
• 未正确更新图表配置：仅调用myChart.update()不会修改已初始化的Prometheus数据源配置，必须直接修改图表实例的options后再触发更新

修复后的完整代码 #

<div id="mastercenter_graph">
    <select id="start_time" onchange="run()">
        <option value="-10000">10s</option>
        <option value="-3600000" selected>1hr</option>
    </select>
    <div id="myChart">
        <canvas></canvas>
    </div>              
    <script>
        const ctx = document.querySelector('#myChart canvas').getContext('2d');
        // 全局变量存储当前时间范围起始值
        let start_value = -260000;
        
        const myChart = new Chart(ctx, {
            type: 'line',
            plugins: [ChartDatasourcePrometheusPlugin],
            options: {
                animation: {
                    duration: 0,
                },
                scales: {},
                plugins: {
                    'datasource-prometheus': {
                        prometheus: {
                            endpoint: 'http://192.168.1.80:9090/',
                        },
                        query: 'sum by (job) (memory_usage_p)',
                        timeRange: {
                            type: 'relative',
                            start: start_value,
                            end: 0,
                            msUpdateInterval: 10000,
                        },
                    },
                },
            },
        });

        function run() {
            // 获取下拉框值并转为数字类型
            start_value = Number(document.getElementById("start_time").value);
            // 直接修改图表实例的配置
            myChart.options.plugins['datasource-prometheus'].timeRange.start = start_value;
            // 触发图表更新，Prometheus插件会重新请求数据
            myChart.update();
        }
    </script>
</div>

关键修复点说明 #

• 移除run()函数内的var声明，确保修改的是全局的start_value
• 使用Number()将下拉框的字符串值转为数值类型，匹配配置要求
• 直接修改myChart.options里的timeRange.start，确保图表实例能读取到新的配置值
• 调整代码顺序，先初始化图表再定义run()函数，避免潜在的变量提升问题

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