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

我正在使用Rails 5和最新的ChartJS库（）

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

我构建了AJAX调用并加载了图表，但我在两个方面失败了

首先，我在从Rails读取数据时遇到语法错误：

SyntaxError: expected expression, got '&'

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

不管我怎么做，它们总是用

“

而不是引号出现

其次，我无法更新图表，因为我需要一个可供图表本身调用的处理程序

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>

路线

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

传感器读数\u控制器.rb

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

任何建议都会被告知。

尝试以下方法：

将字符串标记为受信任的安全字符串。它将被插入到HTML中，不带任何字符 执行额外的逃逸。您有责任确保 字符串不包含恶意内容。此方法等效于 视图中的

raw

帮助程序。建议您使用

sanitize

而不是此方法。决不能在用户输入时调用它

数据集：[
{
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
数据：
},
{
填充颜色：“rgba（151187205,0.2）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
数据：
}
]

这是不可能的，因为它是一个数组。“#”的未定义方法'html_safe'”@ChrisV.好的，试试这个

@sensor_readings.map{i | i.湿度.html_safe}

和

@sensor_readings.map{i.temperature.html_safe}

每个变量都有它的类型，所以它不可能再次出现。

湿度

是一个小数点，所以不能调用html\u safe。唯一的机会是如果

湿度。to\u.html\u safe

我得到相同的消息：

变量标签=[“2016-07-03 10:33:49+0300”2016-07-03 10:3.

湿度是十进制的这不是十进制的

2016-07-03 10:33:49+0300

，无论如何，您可以尝试使用

raw（@sensor\u reads.map（&:temperature））

帮助程序。这是关于datetime创建的\u，但即使使用raw，也不起作用。

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

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