chartkick - 您如何将 chartkick 与 viewcomponent 一起使用？

Question

当在view_component中渲染 chartkick 图表并且您在一页中有多个图表时，唯一的一个图表最终会被渲染。

问题与此相同或相似。

如何使用视图组件渲染 chartkick 图表？

Answer 1

在类似的父组件类ApplicationComponent中，定义您将用作图表 id 的内容：

  def chartkick_chart_id
    self.class.name.underscore.dasherize.gsub("/", "--")
  end

然后，覆盖chartkick_chart以设置id图表的，以便不启动chartkick 的默认设置。

  alias_method :orig_chartkick_chart, :chartkick_chart

  def chartkick_chart(klass, data_source, **options)
    opts = options.merge(id: chartkick_chart_id)
    orig_chartkick_chart klass, data_source, **opts
  end

只要您呈现同一图表页面的一种类型，这将起作用。如果您在同一页面中呈现两个图表（我不明白您为什么会这样做），请在 ID 中添加一些随机字符串。