FilamentPHP集成Chart.js Streaming插件报错：realtime未注册为刻度

我正在Laravel项目中使用FilamentPHP集成chartjs-plugin-streaming插件，实现实时数据可视化。目标是在Filament ChartWidget中使用该插件提供的realtime刻度，但目前该刻度未被识别，也无法看到流更新。

已执行的配置步骤 #

• 安装流插件：

  npm install chartjs-plugin-streaming --save
  

• 配置resources/js/filament-chart-js-plugins.js：

  import ChartPluginZoom from 'chartjs-plugin-zoom';
  import ChartPluginStreaming from 'chartjs-plugin-streaming';
  
  window.filamentChartJsPlugins ??= [];
  window.filamentChartJsPlugins.push(ChartPluginZoom);
  window.filamentChartJsPlugins.push(ChartPluginStreaming);
  

• 更新vite.config.js以引入插件文件：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: [
                  'resources/css/app.css',
                  'resources/js/app.js',
                  'resources/css/filament/admin/theme.css',
                  'resources/js/filament-chart-js-plugins.js', // 确保插件文件被构建
              ],
          }),
      ],
  });
  

• 在AppServiceProvider.php中注册自定义资源：

  FilamentAsset::register([
      Js::make('chart-js-plugins', Vite::asset('resources/js/filament-chart-js-plugins.js'))->module(),
  ]);
  

• 执行构建命令：

  npm run build
  php artisan filament:assets
  

问题现象 #

完成上述步骤后，插件仍无法正常工作，报错：Error: "realtime" is not a registered scale.
禁用Streaming插件后，Zoom插件可正常运行。

参考Widget代码 #

protected function getOptions(): RawJs
    {
        return RawJs::make(
            <<<JS
            {
                "responsive": true,
                "plugins": {
                    "title": {
                        "display": true,
                    },
                    "subtitle": {
                        "display": false,
                    },
                    "description": {
                        "display": false,
                    },
                    "legend": {
                        "display": true,
                    },
                    "zoom": {
                        "pan": {
                            "enabled": true,
                            "mode": 'x',
                        },
                        "zoom": {
                            "wheel": {
                                "enabled": true,
                            },
                            "drag": {
                                "enabled": false,
                            },
                            "pinch": {
                                "enabled": true,
                            },
                            "mode": 'x',
                            "onZoomComplete":({chart}) {
                                chart.update('none');
                            }
                        }
                    },                    
                },
                "scales": {
                    "x": {
                        "type": 'realtime',
                        "realtime": {
                            "delay": 2000,
                            "refresh": 1000,
                            "delay": 2000,
                            "onRefresh": chart => {
                                console.log('Done');
                            }
                        },
                    },
                    "y": {
                        "type": 'linear',
                        "display": true,
                        "position": 'left',
                        "beginAtZero": true,
                        "max": 200,
                    },
                },

            }
            JS
        );
    }

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