2

ページに複数の投票の質問があるという問題があります。簡単に言えば、質問に答えた後、コントローラに対して AJAX 呼び出しが行われ、Chartkick gem と Google jaspi ライブラリを使用してチャートを表示する js.erb がレンダリングされます。これは、単一のチャートに対してのみ有効です。ただし、複数の棒グラフ (回答済みの質問ごとに 1 つ) があると問題になります。最近回答された質問が間違った 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 を使用してチャートをレンダリングする場合、チャートをレンダリングし、「chart-xx」 (xx は 1 から始まる番号) の ID を持つ div を与えます。したがって、私の場合、レンダリングが完了すると5つのチャートがあります（初めてチャートをロードすると、次のIDを持つ5つのチャートがあります：

「チャート-1」、「チャート-2」、「チャート-3」、「チャート-4」、「チャート-5」

私のアプリケーションで。

私はレール上で実行しているため、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>

これにより、グラフ要素の検索が可能になり、ページ上の既存のグラフ要素が強制的に再レン​​ダリングされ、新しいグラフが生成されます。

(注:データ オブジェクトを文字列 [eg] に変換しないでくださいJSON.Stringify(data)。変換すると、chartkick.js が提供されたオブジェクトが文字列であると誤解し、提供された文字列に対してGET呼び出しを実行しようとします。

お役に立てれば。

于 2016-06-13T14:36:49.650 に答える