Rails 7中Turbo Frame/Stream无法渲染Chartkick/Rails_charts求助

环境依赖 #

gem "rails", "7.0.8" 
gem "sprockets-rails"                        
gem "jsbundling-rails"
gem 'turbo-rails', '~> 1.5'  
gem 'stimulus-rails', '~> 1.3'
gem "cssbundling-rails"       
gem 'importmap-rails', '~> 1.2', '>= 1.2.3'
gem 'rails_charts', '~> 0.0.6'
#gem 'chartkick', '~>5.0.5'

问题详情 #

使用turbo_stream.update渲染局部视图、替换页面中的foobar元素时，局部视图内的脚本完全不执行——不管是rails_charts的初始化代码，还是测试用的console.log都没有输出，导致图表无法渲染。

切换为turbo_frame后，console.log可以执行，但图表依然无法显示。尝试过Chartkick，遇到完全相同的问题。

查阅过相关社区讨论，注意到rails_charts仓库里有人提问是否支持turbo streams，但生成的JS代码里明明包含Turbo事件监听器，却无法触发。目前只能无奈回退到整页加载，求可行的解决思路。

相关代码片段 #

控制器中的Turbo Stream响应 #

format.turbo_stream do
   render turbo_stream: [
      turbo_stream.update("avg_wait_area",
                         partial: "wait_stats/avg_wait_chart",
                              locals: { mon_stats: @mon_stats })
        ]
    end

局部视图 _avg_wait_chart.turbo_stream.erb #

<div id="avg_wait_area">
  foobar
</div>

rails_charts生成的DOM及初始化脚本 #

<div id="rails_charts_339d948522be9104817e0757052eebc2663a61dc" class="box" style="width: 100%; height: 450px">
  <script>
    if (!window.RailsCharts) {
      window.RailsCharts = {}
      window.RailsCharts.charts = {}
    }

    function init_rails_charts_339d948522be9104817e0757052eebc2663a61dc(e) {
      if (document.documentElement.hasAttribute("data-turbolinks-preview")) return;
      if (document.documentElement.hasAttribute("data-turbo-preview")) return;

      <!-- RailsCharts::StackedBarChart -->
      var chartDom = document.getElementById('rails_charts_339d948522be9104817e0757052eebc2663a61dc');

      if (!chartDom) { return }

      var lib = ("echarts" in window) ? window.echarts : echarts;
      var chart = lib.init(chartDom, null, { "locale": null, "renderer": "canvas" });
      var option = {"series":[{"data":[0.24,2.15,3.1,3.1,4.54,5.3,5.77,6.25,9.36,16.81,22.97],"type":"bar","stack":{}}],"xAxis":{"type":"value"},"yAxis":{"type":"category","data":["A","b","c","d","f","g","h","i","j","k","l"]},"tooltip":{"trigger":"axis","axisPointer":{"type":"shadow"}},"toolbox":{"feature":{"saveAsImage":{}}},"title":{"text":"Average Wait Days - Dec-2023"},"visualMap":{"show":false,"min":0,"max":25,"orient":"horizontal"},"grid":{"containLabel":true,"left":0}};
      option && chart.setOption(option);

      window.RailsCharts.charts["rails_charts_339d948522be9104817e0757052eebc2663a61dc"] = chart;
    }

    function destroy_rails_charts_339d948522be9104817e0757052eebc2663a61dc(e) {
      var chart = window.RailsCharts.charts["rails_charts_339d948522be9104817e0757052eebc2663a61dc"];
      if (chart) {
        chart.dispose()
      }
      delete window.RailsCharts.charts["rails_charts_339d948522be9104817e0757052eebc2663a61dc"];
    }

    window.addEventListener('load', init_rails_charts_339d948522be9104817e0757052eebc2663a61dc);
    window.addEventListener('turbo:load', init_rails_charts_339d948522be9104817e0757052eebc2663a61dc);
    window.addEventListener('turbolinks:load', init_rails_charts_339d948522be9104817e0757052eebc2663a61dc);

    document.addEventListener("turbolinks:before-render", destroy_rails_charts_339d948522be9104817e0757052eebc2663a61dc);
    document.addEventListener("turbo:before-render", destroy_rails_charts_339d948522be9104817e0757052eebc2663a61dc);
  </script>
</div>

内容的提问来源于stack exchange，提问作者gp-coder