如何在viewcomponent中使用chartkick？

Question

在view_component中呈现chartkick图表时，如果在一个页面中有多个图表，则最终呈现的只有一个图表。

问题与this one相同或相似。

如何使用视图组件呈现chartkick图表？

Answer 1

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

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

然后，重写chartkick_chart以设置图表的id，这样default setting of 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添加一些随机化字符串。