如何将chartkick与viewcomponent结合使用

Question

在view_component中渲染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中添加一些随机字符串。