Chartjs 时间戳到日期时间标签
Chartjs Timestamp to Datetime labels
我正在使用时间戳格式创建我的散点图(日期时间不适用于散点图)。我需要帮助将 X 轴上的标签从时间戳更改为日期时间,以便用户可读。只是轴标签,而不是插入图表的实际时间戳值。
let ctx = (<HTMLCanvasElement>(
document.getElementById("measurementChart")
)).getContext("2d");
this.myChart = new Chart(ctx, {
type: "scatter",
data: {
datasets: [
{
label: name,
backgroundColor: "black",
borderColor: "blue",
showLine: true,
data: d,
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
tooltips: {
mode: "interpolate", //interpolate
enabled: true,
intersect: false,
backgroundColor: "black",
},
scales: {
yAxes: [
{
display: true,
scaleLabel: {
display: true,
},
}
],
xAxes: [
{
display: true,
scaleLabel: {
display: false,
labelString: "Date"
},
}
]
},
legend: {
reverse: true,
display: true,
},
}
});
您可以按照此处所述使用报价回调:https://www.chartjs.org/docs/2.9.4/axes/labelling.html#creating-custom-tick-formats
scales: {
yAxes: [
{
ticks:{
callback: (val) => (new Date(val)) // or a different way to convert timestamp to date
},
display: true,
scaleLabel: {
display: true,
},
}
],
xAxes: [
{
ticks:{
callback: (val) => (new Date(val)) // or a different way to convert timestamp to date
}
display: true,
scaleLabel: {
display: false,
labelString: "Date"
},
}
]
}
我正在使用时间戳格式创建我的散点图(日期时间不适用于散点图)。我需要帮助将 X 轴上的标签从时间戳更改为日期时间,以便用户可读。只是轴标签,而不是插入图表的实际时间戳值。
let ctx = (<HTMLCanvasElement>(
document.getElementById("measurementChart")
)).getContext("2d");
this.myChart = new Chart(ctx, {
type: "scatter",
data: {
datasets: [
{
label: name,
backgroundColor: "black",
borderColor: "blue",
showLine: true,
data: d,
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
tooltips: {
mode: "interpolate", //interpolate
enabled: true,
intersect: false,
backgroundColor: "black",
},
scales: {
yAxes: [
{
display: true,
scaleLabel: {
display: true,
},
}
],
xAxes: [
{
display: true,
scaleLabel: {
display: false,
labelString: "Date"
},
}
]
},
legend: {
reverse: true,
display: true,
},
}
});
您可以按照此处所述使用报价回调:https://www.chartjs.org/docs/2.9.4/axes/labelling.html#creating-custom-tick-formats
scales: {
yAxes: [
{
ticks:{
callback: (val) => (new Date(val)) // or a different way to convert timestamp to date
},
display: true,
scaleLabel: {
display: true,
},
}
],
xAxes: [
{
ticks:{
callback: (val) => (new Date(val)) // or a different way to convert timestamp to date
}
display: true,
scaleLabel: {
display: false,
labelString: "Date"
},
}
]
}