带有多个图表的Chartkick 4条形图问题
我有一个问题，我在一个页面上有多个投票问题。很简单，在回答了一个问题之后，对控制器进行一个AJAX调用，并使用Chartkick gem和Google jaspi库呈现一个显示图表的js.erb。这只适用于单个图表。然而，有几个条形图(每个回答的问题一个)是一个问题。最近回答的问题会覆盖错误div中的问题图表，而只显示上次回答的问题中的加载。
以下是基本代码。
在视图中：
<div id="results-<%= i %>" style="display: none; margin-top: -20px;"></div>一旦回答了问题，上面的div就会与图表一起显示。
在控制器中：
data = [
{
data: results_array
}
]
respond_to do |format|
@div_id = div_id
@poll_data = data
format.js
end然后在上面的块中渲染的js.erb文件中：
$("#results-<%= @div_id%>").html('<%= escape_javascript(bar_chart(@poll_data, library: {legend: "none"})) %>').show();任何帮助都将不胜感激。我需要为每个问题显示正确的图表，并有他们可靠的加载。有没有办法区分我缺少的图表或对象的实例？谢谢。
回答 2
Stack Overflow用户
发布于 2016-06-13 14:36:50
我目前正在使用Chartkick来准备我的图表，我发现了以下几点。
如果你使用Chartkick呈现一个图表，它将呈现一个图表，并给它一个div，id为‘-xx’ (xx是数字，从1开始)。因此，在我的例子中，我有5个图表，当我完成渲染时(第一次加载图表，它将有5个图表，ID为：
'chart-1'，'chart-2'，'chart-3'，'chart-4'，'chart-5‘
在我的应用程序中。
我在rails上运行，因此我试图通过调用AJAX来重新呈现图表，并替换我存储图表的html元素。但是，当您调用AJAX并再次重新呈现Chartkick时，似乎是这样的。它再次以' chart -1'开始，因此它将替换您的第一个图表。(我没有深入到源代码中去看一看，但是似乎有一些代码行可以自动替换基于的图表: div: div chart -1)
在尝试了我们的几种方法之后，我最终发现最有效的方法是用替换javascript元素直接的。因此，我使用Javascript完成了以下工作
new Chartkick.LineChart($('#' + target).children().first().attr('id'), data);JSON目标是存储图表的元素，数据是从AJAX调用中检索到的原始JSON对象。如下图所示：
<div id="target">
<div id="chart-1">
</div>
</div>这样做将允许搜索图表元素，并强制页面上的现有图表元素重新呈现并生成新的图表。
(注意：不要将数据对象转换为字符串，例如JSON.Stringify(data)。这样做会使chartkick.js误解所提供的对象是字符串，并尝试对所提供的字符串执行GET调用。
希望这能有所帮助。
Stack Overflow用户
发布于 2017-07-06 22:02:58
我在使用Chartkick时也遇到了同样的问题，我只是更改了我想使用的每个图表的'id‘。我在下面的链接中找到了解决方案:我知道https://github.com/ankane/chartkick/issues/193对这个问题的回答有点晚了，但也许它会对其他人有所帮助。
https://stackoverflow.com/questions/31978222
复制
腾讯云开发者
