Динамический график ChartJS Обновлен в Rails с AJAX

Question

Я использую Rails 5 и самую последнюю библиотеку ChartJS (http://www.chartjs.org/docs/).

Я хочу выполнить, чтобы получить последние 20 элементов из модели SensorReading и обновить диаграмму с помощью setInterval и AJAX.

Я построил вызов AJAX, и я загрузил диаграмму, но я терпел неудачу в двух вещах.

Прежде всего я получаю ошибку синтаксиса при чтении данных из Rails:

SyntaxError: expected expression, got '&' 

var labels = ["2016-07-03 10:33:49 +0300", "2016-07-03 10:3 

Независимо от того, что я пытался, они продолжают появляться с " вместо кавычек.

Во-вторых, я не могу обновить диаграмму, так как мне нужен обработчик, доступный для самой диаграммы для вызова .update().

index.html.erb

<h1>Dashboard</h1> 
<div class="ui divider"></div> 

<div class="ui padded grid"> 
    <div class="four wide column"> 
    <div class="ui statistic"> 
     <div class="value"> 
     <%= @temperature %>.C 
     </div> 
     <div class="label"> 
     TEMPERATURE 
     </div> 
    </div> 
    <br> 
    <div class="ui statistic"> 
     <div class="value"> 
     <%= @humidity %>% 
     </div> 
     <div class="label"> 
     HUMIDITY 
     </div> 
    </div> 
    </div> 
    <div class="twelve wide column"> 
    <div class="ui segment"> 
     <div class="line-chart" style="max-height: 400px; display:block;"> 
     <canvas id="updating-chart"></canvas> 
     </div> 
    </div> 
    </div> 
</div> 
<br> 


<script> 
var labels = <%= @sensor_readings.map(&:created_at) %>; 

var canvas = document.getElementById('updating-chart'), 
    ctx = canvas.getContext('2d'), 
    startingData = { 
     labels: labels, 
     datasets: [ 
      { 
       fillColor: "rgba(220,220,220,0.2)", 
       strokeColor: "rgba(220,220,220,1)", 
       pointColor: "rgba(220,220,220,1)", 
       pointStrokeColor: "#fff", 
       data: <%= @sensor_readings.map(&:temperature) %> 
      }, 
      { 
       fillColor: "rgba(151,187,205,0.2)", 
       strokeColor: "rgba(151,187,205,1)", 
       pointColor: "rgba(151,187,205,1)", 
       pointStrokeColor: "#fff", 
       data: <%= @sensor_readings.map(&:humidity) %> 
      } 
     ] 
    }, 
    latestLabel = startingData.labels[6]; 

// Reduce the animation steps for demo clarity. 
var myLiveChart = new Chart(ctx , { 
    type: "line", 
    data: startingData, 
    animationSteps: 15 
}); 

setInterval(function(){ 
    // Add two random numbers for each dataset 
    //myLiveChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50 
    myLiveChart.update(); // Calling update now animates the position of March from 90 to 50. 
}, 5000); 

</script> 

dashboard.js

var ready = function(){ 

    setInterval(refreshSensorReadings, 3000); 

    function refreshSensorReadings(){ 
    console.log("--> Called"); 
    $.rails.ajax({ 
     type: "GET", 
     dataType: 'script', 
     url: "/sensor_readings_chart_data.js", 
     success: function(result){ 
     //$('.line-chart').html(result); 
     console.log(result); 
     } 
    }); 
    }; 


}; 

$(document).on('turbolinks:load', ready); 

маршрут

get 'sensor_readings_chart_data', to: 'sensor_readings#chart_data' 

sensor_readings_controller.rb

def chart_data 
    @sensor_readings = SensorReading.last(20) 
    respond_to do |format| 
     format.json { head :no_content } 
     format.js 
    end 
    end 

будет appreaciated Любые советы.

Answer 1

Попробуйте метод html_safe:

Отмечает строку как доверенный сейф. Он будет вставлен в HTML без выполнения дополнительного экранирования . Это ваша ответственность за то, чтобы строка не содержала вредоносного содержимого. Этот метод эквивалентен помощнику raw во взглядах. Вместо этого метода рекомендуется использовать sanitize . Его никогда не следует вызывать на входе пользователя.

datasets: [ 
     { 
      fillColor: "rgba(220,220,220,0.2)", 
      strokeColor: "rgba(220,220,220,1)", 
      pointColor: "rgba(220,220,220,1)", 
      pointStrokeColor: "#fff", 
      data: <%= @sensor_readings.map(&:temperature).html_safe %> 
     }, 
     { 
      fillColor: "rgba(151,187,205,0.2)", 
      strokeColor: "rgba(151,187,205,1)", 
      pointColor: "rgba(151,187,205,1)", 
      pointStrokeColor: "#fff", 
      data: <%= @sensor_readings.map(&:humidity).html_safe %> 
     } 
    ]