Chartkick Rails 4条形图问题与多个图表

Chartkick Rails 4 Bar Chart Issue with Multiple Charts

本文关键字：问题 Rails 条形图 Chartkick      更新时间：2023-09-26

我有一个问题，我在一个页面上有多个民意调查问题。很简单，在回答了问题之后，将对控制器和js进行AJAX调用。erb使用Chartkick gem和Google jsp库呈现图表。这只适用于单个图表。然而，有几个条形图(每个回答的问题一个)是一个问题。结果是，最近回答的问题会覆盖错误div中问题的图表，只显示最后回答的问题。

基本代码如下:

In View: 

 <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();

任何帮助都将非常感激。我需要为每个问题显示正确的图表，并让它们可靠地加载。是否有一种方法来区分图表或对象的实例，我错过了?谢谢。

我对Chartkick有同样的问题，我刚刚改变了我想使用的每个图表的'id'。我找到的解决方案在下面的链接:https://github.com/ankane/chartkick/issues/193我知道现在回答这个问题有点晚了，但也许它会对别人有所帮助。

我目前正在使用Chartkick来准备我的图表，我发现了以下内容:

如果你使用Chartkick来渲染一个图表，它会渲染一个图表，并给它一个div, id为'chart-xx' (xx是数字，从1开始)。所以在我的情况下，我有5个图表，当我完成渲染(第一次加载图表，它将有5个图表，id为:

"图1"、"图2",图3,图4,图5的

我在rails上运行，因此我试图通过调用AJAX来重新渲染图表并替换我存储图表的html元素。然而，似乎当您调用AJAX并重新呈现Chartkick时。它再次以'chart-1'开始，因此它正在替换您的第一个图表。(我还没有深入到源代码有一个看，但似乎有一些代码行自动替换图表基于div: chart-1)

在尝试了几种方法后，最终我发现最有效的方法是直接替换javascript元素。因此，我使用Javascript完成了以下操作:

new Chartkick.LineChart($('#' + target).children().first().attr('id'), data);

target是存储图表的元素，data是您从AJAX调用中检索到的原始JSON对象。如下图所示:

<div id="target">
  <div id="chart-1">
  </div>
</div>

这样做将允许搜索图表元素，并强制页面上现有的图表元素重新呈现并生成一个新的图表。

(注意:不要将数据对象转换为String[例如JSON.Stringify(data)])。这样做会让chartkick.js误解所提供的对象是一个字符串，它会尝试对所提供的字符串执行GET调用。

相关文章：