[英]Chart.js point format data for a scatter plot
Chart.js scatter chart only accepts data in a point format (x, y). Chart.js 散点图只接受点格式(x,y)的数据。 Im a trying to fill the data points with infomration about medications from a file called meds.json More specifically, the x would be the month of last fill date of the medication and the y would be the dose.
我试图用名为 meds.json 的文件中的药物信息填充数据点更具体地说,x 将是药物最后一次填充日期的月份,y 将是剂量。
How can I grab all this data from the meds.json file and insert it to the data to create the points for my scatter plot?如何从 meds.json 文件中获取所有这些数据并将其插入数据以创建我的散点图 plot 的点? If I try to grab all dates and store them in an array, and all the dose values in another array, how can I use that populate the point data using those arrays?
如果我尝试获取所有日期并将它们存储在一个数组中,并将所有剂量值存储在另一个数组中,我该如何使用这些 arrays 填充点数据?
Here's how to make a scatter plot using Chart.js, I am trying to populate the x,y points under data 'data':这是使用 Chart.js 制作散点 plot 的方法,我正在尝试填充数据“数据”下的 x、y 点:
// charts.js
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
// x = month, y = dose
// fill these in for all meds in the json file
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'top'
}]
}
}
});
}
meds.json meds.json
[
{
"name": "Simvastatin",
"dose": 10,
"dose unit": "mg",
"freq": "qd",
"route": "PO",
"last fill date": "2/15/2020",
"coverage": "100%",
"anticipated remaining fills": 2
},
{
"name": "Lisinopril",
"dose": 5,
"dose unit": "mg",
"freq": "qd",
"route": "PO",
"last fill date": "2/15/2020",
"coverage": "100%",
"anticipated remaining fills": 2
}
...... The list goes on
]
You should actually use a line chart for this which would be much more appropriate and exactly show the trend & relationship between month and the dosage.您实际上应该为此使用折线图,这将更合适并准确显示月份与剂量之间的趋势和关系。
But since you asked for scatter chart...you can do it like this:但既然你要求散点图......你可以这样做:
const data = [{ "name": "Simvastatin", "dose": 10, "dose unit": "mg", "freq": "qd", "route": "PO", "last fill date": "2/15/2020", "coverage": "100%", "anticipated remaining fills": 2 }, { "name": "Lisinopril", "dose": 5, "dose unit": "mg", "freq": "qd", "route": "PO", "last fill date": "2/15/2020", "coverage": "100%", "anticipated remaining fills": 2 } ] const transformedData = data.map(obj=>{ return { x:new Date(obj["last fill date"]).getMonth() + 1, y:obj.dose, } }) console.log(transformedData)
and then use as然后用作
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: transformedData
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'top'
}]
}
}
});
}
Hope this helps !希望这可以帮助 !
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.