Chartkick Rails 4 Проблема с диаграммой диаграммы с несколькими диаграммами

Question

У меня проблема, когда у меня есть несколько вопросов опроса на странице. Достаточно просто, после ответа на вопрос вызывается вызов AJAX контроллеру, и отображается js.erb, отображающая диаграмму с использованием драгоценного камня Chartkick и библиотеки Google jaspi. Это отлично работает только для одной диаграммы. Однако наличие нескольких гистограмм (по одному для каждого ответного вопроса) является проблемой. Что происходит, так это самый последний ответный вопрос, который перезаписывает диаграмму вопроса в неправильном 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 файл, который rendereed в приведенном выше блоке:

$("#results-<%= @div_id%>").html('<%= escape_javascript(bar_chart(@poll_data, library: {legend: "none"})) %>').show(); 

Любая помощь будет принята с благодарностью. Мне нужно отображать правильные диаграммы для каждого вопроса и надежно загружать их. Есть ли способ различать экземпляры диаграмм или объектов, которые мне не хватает? Благодарю.

Answer 1

В настоящее время я использую Chartkick для подготовки моей диаграммы, и я выяснил следующее.

Если вы используете Chartkick для рендеринга диаграммы, он отобразит диаграмму и даст ей div с идентификатором 'chart-xx' (xx - число, начиная с 1). Так что в моем случае у меня есть 5 диаграмм, когда я сделаю рендеринг (загрузка диаграммы в первый раз будет иметь 5 диаграмм с идентификатором:

'chart-1', 'chart-2', ' график-3' , „диаграмма-4“, „диаграмма-5“

в моем приложении.

Я бегу по рельсам, поэтому я попытался вновь сделать диаграмму с помощью вызова AJAX и заменить HTML элемент, который я сохранил в своем графике. Однако кажется, что когда вы вызываете AJAX и снова отрисовываете Chartkick, он снова начинается с 'chart-1', поэтому он заменяет ваш первый график. погрузитесь в исходный код, чтобы посмотреть, но кажется, что я S некоторые линии кодов, которые автоматически заменяют диаграмму на основе DIV: график-1)

Попробовав наши несколько методов, в конце концов, я обнаружил, что наиболее эффективным способ будет заменить яваскрипт элемента прямого , Поэтому я сделал следующее, используя Javascript:

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

цель является элементом, где вы храните график и данных являются сырым объектом JSON вы извлечены из вашего вызова AJAX.Как показано в следующем:

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

Это позволит поиск элемента диаграммы и заставить существующий элемент диаграммы на странице, чтобы повторно вынести и создать новую диаграмму.

(Примечание: Не преобразования объекта данных в строку [например JSON.Stringify(data)] Это будет препятствовать chartkick.js понял, что при условии объекта является строкой, и он будет пытаться выполнить GET вызова. ... строка при условии

Надеется, что это помогает

Answer 2

у меня была таким же проблема с Chartkick, я только что изменил «идентификатор» каждый график я хотел использовать решение, которое я нашел на ссылку ниже: https://github.com/ankane/chartkick/issues/193 Я знаю, это немного поздно для этого ответа, но, возможно, это будет h elp кто-то другой.