Question

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

我想要完成的是从SensorReading模型中获取最新的20个项目，并使用setInterval和AJAX更新图表。

我已经构建了AJAX调用，并且我已经加载了图表，但我失败了两件事。

首先，从Rails读取数据时出现语法错误：

SyntaxError: expected expression, got '&'

var labels = [&quot;2016-07-03 10:33:49 +0300&quot;, &quot;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方法：

将字符串标记为可信安全。它将被插入到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 %>
      }
  ]

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

1 个答案: