我目前正在研究一個分析儀表板,并且我選擇了 Chartjs 來可視化圖表,一切正常,除了我似乎不知道如何動態設定 chartjs 時間物件的 MIN 和 MAX 日期。它是這樣硬編碼的:
const config = {
type: "bar",
data: {
datasets: [
{
label: "base",
data: monthly_data,
backgroundColor: ["rgba(255, 99, 132, 0.2)"],
borderColor: ["rgba(255, 99, 132, 1)"],
borderWidth: 1,
minBarLength: 7,
parsing: {
xAxisKey: "x",
yAxisKey: "base",
},
},
{
label: "Case",
data: monthly_data,
backgroundColor: ["rgba(54, 162, 235, 0.2)"],
borderColor: ["rgba(54, 162, 235, 1)"],
borderWidth: 1,
minBarLength: 7,
parsing: {
xAxisKey: "x",
yAxisKey: "case",
},
},
{
label: "Standard",
data: monthly_data,
backgroundColor: ["rgba(255, 206, 86, 0.2)"],
borderColor: ["rgba(255, 206, 86, 1)"],
borderWidth: 1,
minBarLength: 7,
parsing: {
xAxisKey: "x",
yAxisKey: "standard",
},
},
],
},
options: {
scales: {
x: {
type: "time",
min: "2021-03-01",
max: "2022-03-31",
time: {
unit: "month",
},
},
},
},
};
我可以呼叫一個可以動態設定的函式,例如在每月視圖中圖表應該顯示 12 個月前嗎?
uj5u.com熱心網友回復:
您可以將一個函式傳遞給為您計算最小值和最大值的最小值和最大值,如下所示:
options: {
scales: {
x: {
type: 'time',
min: () => {
return calculateMin()
}
}
}
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/496825.html
標籤:javascript 日期 图表.js
