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

我正在使用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

任何建议将不胜感激。