如何在ViewComponent中使用Chartkick并解决多图表仅渲染一个的问题

问题根因 #

该问题本质是Chartkick旧版本的全局实例存储逻辑冲突，或是多图表共用重复DOM ID、组件内重复加载Chartkick脚本导致的实例覆盖，最终仅最后一个加载的图表可正常渲染。

配置步骤 #

• 升级Chartkick到4.0及以上版本，该版本已经修复了同页面多图表实例互相覆盖的底层逻辑问题
• 给每个图表显式指定唯一的DOM ID，不要依赖框架默认生成的ID：
  循环渲染组件的场景下，可将对应业务数据的唯一ID传入组件，拼接为图表ID，示例如下：

  # 父页面调用组件
  <% @metrics.each do |metric| %>
    <%= render MetricChartComponent.new(metric: metric, chart_id: "metric_chart_#{metric.id}") %>
  <% end %>
  

  组件内部模板直接使用传入的唯一ID：

  # app/components/metric_chart_component.html.erb
  <%= line_chart @metric.data, id: @chart_id %>
  

• 不要在View Component的局部模板中重复引入Chartkick JS依赖，将依赖统一放到全局布局的脚本加载区域，避免重复初始化多次导致实例冲突
• 如果项目使用了Turbo框架，需在全局JS中绑定Turbo加载事件触发Chartkick重载，避免页面跳转后渲染异常：

  document.addEventListener("turbo:load", () => {
    Chartkick.reload()
  })
  

• 配置完成后可通过浏览器开发者工具检查所有图表DOM的ID属性是否唯一，同时查看控制台无Chartkick相关报错，即可正常渲染多个图表。

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