Chart.js 散點格式數據 plot

Question

Chart.js 散點圖只接受點格式（x，y）的數據。 我試圖用名為 meds.json 的文件中的葯物信息填充數據點更具體地說，x 將是葯物最后一次填充日期的月份，y 將是劑量。

如何從 meds.json 文件中獲取所有這些數據並將其插入數據以創建我的散點圖 plot 的點？ 如果我嘗試獲取所有日期並將它們存儲在一個數組中，並將所有劑量值存儲在另一個數組中，我該如何使用這些 arrays 填充點數據？

這是使用 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

[
  {
    "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

]

Answer 1

您實際上應該為此使用折線圖，這將更合適並准確顯示月份與劑量之間的趨勢和關系。

但既然你要求散點圖......你可以這樣做：

 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)

然后用作

var scatterChart = new Chart(ctx, {
        type: 'scatter',
        data: {
            datasets: [{
                label: 'Scatter Dataset',
                data: transformedData
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'top'
                }]
            }
        }
    });
}

希望這可以幫助 ！