当使用时间作为第二个轴时,我在准备用于 chart.js 的 Ruby on Rails 项目数据时遇到了一些问题。
我已经查看了各种其他问题并设法非常接近,但是我在以 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}
]
当前尝试
我在我的 Controller 中按如下方式创建数组,其中 reading_time
和 obs.heart_rate
是整数,我认为这是在创建哈希数组:
...
@hr.push ( { :x => reading_time, :y => obs.heart_rate } )
...
然后我在我的 View 中打印它,转换为 json,以便理论上它可以与 javascript 库 chart.js 一起工作:
...
data: <%= @hr.to_json %>,
...
很确定我的问题出在上面两行中的某处,但完整的代码在下面以备不时之需。
完整代码
这就是我在我的 Controller 中创建(我认为)哈希数组的方式:
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>
最佳答案
由于渲染,它在后台使用 to_s
,这可能会在从 string
类型对象渲染时导致一些编码问题。您应该尝试对 @hr.to_json
返回的对象使用 html_safe
方法,例如 @hr.to_json.html_safe
关于javascript - 从 Ruby on Rails 输出散列数组到 chart.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57740107/