2

我有一个问题，我在一个页面上有多个民意调查问题。很简单，在回答问题后，控制器会调用 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();

任何帮助将不胜感激。我需要为每个问题显示正确的图表并可靠地加载它们。有没有办法区分我丢失的图表或对象的实例？谢谢。

4

2 回答 2

0

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

如果您使用 Chartkick 渲染图表，它将渲染图表并给它一个 id 为“chart-xx”的 div （xx 是数字，从 1 开始）。所以在我的情况下，我有 5 个图表，当我完成渲染时（第一次加载图表，它将有 5 个图表，ID 为：

'chart-1'、'chart-2'、'chart-3'、'chart-4'、'chart-5'

在我的应用程序中。

我在 Rails 上运行，因此我尝试通过调用 AJAX 重新渲染图表并替换我存储图表的 html 元素。但是，似乎当您调用 AJAX 并重新渲染 Chartkick 时。它再次以“chart-1”开头，因此它正在替换您的第一个图表。（我还没有深入研究源代码，但似乎有一些代码行会根据 div: chart-1自动替换图表）

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

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

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

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

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

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

希望这可以帮助。

于 2016-06-13T14:36:49.650 回答
0

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

于 2017-07-06T22:02:58.437 回答