使用AJAX在Rails中更新动态图表

我正在使用Rails 5和最新的ChartJS库(http://www.chartjs.org/docs/)。

我想要完成的是从SensorReading模型中获取最新的20个项目，并使用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

任何建议将不胜感激。