Chartkick Rails 4條形圖問題與多個圖表

Question

我在一個頁面上有多個投票問題時遇到問題。 很簡單，在回答問題后，將使用Chartkick gem和Google jaspi庫對控制器進行AJAX調用並呈現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();

任何幫助將不勝感激。 我需要為每個問題顯示正確的圖表，並可靠地加載它們。 有沒有辦法區分我所缺少的圖表實例或對象？ 謝謝。

Answer 1

我當前正在使用Chartkick准備我的圖表，並且發現了以下內容。

如果您使用Chartkick渲染圖表，它將渲染一個圖表，並給它一個id為'chart-xx'的div（xx是數字，從1開始）。 因此，在我的情況下，我有5個圖表，完成渲染后（第一次加載圖表時，它將有5個圖表，ID為：

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

在我的應用程序中。

我在軌道上運行，因此我嘗試通過調用AJAX來重新渲染圖表，並替換存儲圖表的html元素。 但是，似乎在您調用AJAX並再次重新渲染Chartkick時。 它再次從“圖1”開始，因此它正在替換您的第一個圖表。 （我沒有深入研究源代碼，但是似乎有一些代碼行會基於div自動替換圖表： chart-1 ）

在嘗試了幾種方法之后，最終我發現最有效的方法是替換javascript元素Straight 。 因此，我使用Javascript完成了以下操作：

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

target是用於存儲圖表和數據的元素，它們是從AJAX調用中檢索到的原始JSON對象。 如下圖所示：

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

這樣做將允許搜索圖表元素，並強制頁面上的現有圖表元素重新呈現並生成新圖表 。

（注意： 請勿將數據對象轉換為String [例如JSON.Stringify(data) ]。這樣做會使chartkick.js誤解所提供的對象是字符串，並且它將嘗試對所提供的字符串執行GET調用。

希望這可以幫助。

Answer 2

我對Chartkick遇到了同樣的問題，我剛剛更改了我想使用的每個圖表的“ id”。 我在下面的鏈接上找到了解決方案： https : //github.com/ankane/chartkick/issues/193我知道這個答案有些遲了，但也許會對其他人有所幫助。