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

Question

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

如有任何建议，我们将不胜感激。

Answer 1

尝试html_safe方法:

Marks a string as trusted safe. It will be inserted into HTML with no additional escaping performed. It is your responsibilty to ensure that the string contains no malicious content. This method is equivalent to the raw helper in views. It is recommended that you use sanitize instead of this method. It should never be called on user input.

 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 %>
      }
  ]