ruby-on-rails 为什么Rails 7的turbo_frame或turbo_stream不能渲染chartkick或rails_chart?

ubof19bj  于 4个月前  发布在  Ruby
关注(0)|答案(1)|浏览(67)

我正在使用以下内容:

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脚本。但似乎脚本代码不执行,因此不呈现图表。我尝试在partial中添加console.log JS调用,这些也不呈现。当我把它切换到一个turbo_frame,测试console.log JS调用render,但图表仍然没有。我也试过chartkick-相同的区别。
我看了很多diff堆栈溢出的Q&A,包括这个Chartkick not loading in Ruby on Rails 7https://github.com/hotwired/turbo-rails/issues/416和其他几个,没有任何帮助。
我确实看到https://github.com/railsjazz/rails_charts在“贡献部分”有“支持turbo流?”-这表明turbo不支持-但后来我看到下面的JS,它有turbo事件侦听器在那里。
我觉得这将是一个惊人的流动,如果我能让他们的工作。现在,我恢复到满页加载可悲的,直到我可以整理出来-任何想法或帮助可能?

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

in _avg_wait_chart.turbo_stream.erb
    <div id="avg_wait_area">
      foobar
    </div>


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>


我再次尝试了上述所有方法。

ddhy6vgd

ddhy6vgd1#

问题是在渲染 turbo_stream 时没有触发这些事件,这意味着图表没有初始化。解决方案很简单:根本不使用事件侦听器。为了更好地将其 Package 在Stimulus中:

bin/rails g stimulus chart

个字符
使用此刺激控制器而不是生成内联JavaScript:

# app/helpers/application_helper.rb

# this helper method is used by all the other more specific chart helpers
def generate_rails_chart(klass, data, options = {})
  chart = klass.new(data, options)

  tag.div class: "w-full h-[450px]", data: {
    controller:           :chart,
    chart_option_value:   chart.option,
    chart_theme_value:    chart.theme,
    chart_locale_value:   chart.locale,
    chart_renderer_value: chart.renderer
  }
end


在页面上渲染或在涡轮流中渲染:

<%= line_chart({1=>10, 2=>20, 3=>15}) %>


或来自控制器:

respond_to do |format|
  format.turbo_stream do
    render turbo_stream: turbo_stream.update(
      "avg_wait_area",
      helpers.line_chart({1=>10, 2=>20, 3=>15})
    )
  end
end


这是应该由图表助手生成的,这里没有JavaScript代码:

<div class="w-full h-[450px]"
  data-controller="chart"
  data-chart-option-value="{&quot;series&quot;:[{&quot;data&quot;:[10,20,15],&quot;type&quot;:&quot;line&quot;}],&quot;xAxis&quot;:{&quot;type&quot;:&quot;category&quot;,&quot;data&quot;:[1,2,3]},&quot;yAxis&quot;:{&quot;type&quot;:&quot;value&quot;},&quot;tooltip&quot;:{&quot;trigger&quot;:&quot;axis&quot;},&quot;toolbox&quot;:{&quot;feature&quot;:{&quot;saveAsImage&quot;:{}}}}"
  data-chart-renderer-value="canvas"
></div>


Stimulus会处理剩下的部分,不管你如何渲染它:在页面上还是在涡轮流上。

相关问题