从 Ruby on Rails 到 chart.js 的散列输出数组

Question

我在准备 Rails 项目中的 Ruby 数据以用于 chart.js 时遇到了一些问题，当使用时间作为第二轴时。

我已经查看了其他各种问题并设法非常接近，但是我在以 chart.js 可以识别的格式导出数据时遇到问题。

感谢您的帮助！

---

问题

我需要以这种形式打印数据：

data: [
  {"x":1567006282000,"y":145},        
  {"x":1567009767000,"y":120},
  {"x":1567009838000,"y":130}
]

但我目前得到以下信息：

data: [
    {"x":1567006282000,"y":145}, 
    {"x":1567009767000,"y":120}, 
    {"x":1567009838000,"y":130}
]

---

当前尝试

我正在我的控制器中按如下方式创建数组，其中 reading_time 和 obs.heart_rate 是整数，我 认为 这是创建一个数组哈希值：

...
@hr.push ( { :x => reading_time, :y => obs.heart_rate  } )
...

然后我在我的视图中打印它，转换为 json 这样理论上它可以与 javascript 库一起工作 chart.js:

...
data: <%= @hr.to_json %>,
...

很确定我的问题出在上面两行中的某处，但下面是完整的代码以备不时之需。

---

完整代码

这就是我在 控制器 :

中创建（我认为的）哈希数组的方式

def chart 

    # Load observations for specific patient
    @observations = Observation.where(:patient_id => params[:patient_id]);

    # Prep arrays
    @readings = []
    @hr = []

    # Cycle through all observations for this patient
    @observations.each do |obs| 

        # Convert created time to integer
        # Multiple by 1000 as chart.js expects milliseconds while ruby uses seconds from UNIX epoch
        reading_time = obs.created_at.to_i * 1000

        # Add time to array so we can use this for the labels
        @readings.push(reading_time)

        # Create hash of time and observation value
        hr_temp = {:x => reading_time , :y => obs.heart_rate }

        # Push hash to the array
        @hr.push( hr_temp )

        # Repeat for other obserations - blood pressure, oxygen sats, etc

    end

end

最后我是如何在我的 view 中打印它的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>

<canvas id="myChart" width="400" height="400"></canvas>
<script>

var ctx = document.getElementById('myChart').getContext('2d');
var scatterChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: <%= @readings %>,
        datasets: [{
            label: 'Heart Rate',
            data: <%= @hr.to_json %>,
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    parser: 'X', // parse x values as unix timestamp
                    tooltipFormat: 'MMM Do, \'YY'
                },
            }]
        }
    }
});
</script>

---

工作示例

这是一个有效的硬编码示例，展示了我的目标。

var ctx = document.getElementById('myChart').getContext('2d');
var scatterChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'Heart Rate',
            data: [
              {"x":1567006282000,"y":145},        
              {"x":1567009767000,"y":120},
              {"x":1567009838000,"y":130}
            ]
        }]
    },
    options: {
        scales: {
  xAxes: [{
   type: 'time',
   time: {
    parser: 'X', // parse x values as unix timestamp
    tooltipFormat: 'MMM Do, \'YY'
   },
  }]
 }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>

<canvas id="myChart" width="400" height="400"></canvas>

Answer 1

由于渲染，它在引擎盖下使用 to_s，这可能会在从 string 类型对象渲染时导致一些编码问题。您应该尝试对 @hr.to_json 返回的对象使用 html_safe 方法，例如 @hr.to_json.html_safe