在chart.js图表中,如果x轴是'timeseries'类型,那么向该图表添加线注解的正确配置是什么?
如果没有timeseries
,下面的代码可以按预期工作。
function average(ctx) {
const values = ctx.chart.data.datasets[0].data;
return values.reduce((a, b) => a + b, 0) / values.length;
}
const ctx = document.getElementById('chart');
const mean = {
type: 'line',
drawTime: 'afterDraw',
label: {
display: true,
content: (ctx) => average(ctx).toFixed(2),
},
scaleID: 'y',
value: (ctx) => average(ctx)
};
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', ''],
datasets: [
{ data: [42, 129, 53, 55, 52, 62, 68, 55, 61, 58, 66, 63, 53, 69] }
]
},
options: {
plugins: {,
annotation: {
annotations: {
mean
}
}
}
}
});
但是,当我介绍timeseries
时
function average(ctx) {
const values = ctx.chart.data.datasets[0].data;
return values.reduce((a, b) => a + b, 0) / values.length;
}
const ctx = document.getElementById('chart');
const mean = {
type: 'line',
drawTime: 'afterDraw',
label: {
display: true,
content: (ctx) => average(ctx).toFixed(2),
},
scaleID: 'y',
value: (ctx) => average(ctx)
};
const chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
data: [
{ x: '2023-04-03 10:32:09', y: 42 },
{ x: '2023-04-03 10:32:16', y: 129 },
{ x: '2023-04-03 10:32:29', y: 53 },
{ x: '2023-04-03 10:32:37', y: 55 },
{ x: '2023-04-03 10:32:44', y: 52 },
{ x: '2023-04-03 10:32:51', y: 62 },
{ x: '2023-04-03 10:33:04', y: 68 },
{ x: '2023-04-03 10:33:12', y: 55 },
{ x: '2023-04-03 10:33:26', y: 61 },
{ x: '2023-04-03 10:34:11', y: 58 },
{ x: '2023-04-03 10:34:27', y: 66 },
{ x: '2023-04-03 10:34:34', y: 63 },
{ x: '2023-04-03 10:34:48', y: 53 },
{ x: '2023-04-03 10:34:55', y: 69 } ]
},
]
},
options: {
scales: {
x: {
type: 'timeseries',
time: { unit: 'hour' },
ticks: { beginAtZero: true }
}
},
plugins: {
annotation: {
annotations: {
mean
}
}
}
}
});
注解未呈现。
我错过什么了吗?
2条答案
按热度按时间uqjltbpv1#
问题是平均函数。当你使用“数据点”(对象作为数据)时,你必须使用表示Y数据的对象的属性。
mcdcgff02#
您应该导入[文档]中提到的日期适配器库
时间刻度要求同时存在日期库和相应的适配器。请从可用的适配器中选择。
当在注解中绘制一条指示平均值的线时,
b
是一个对象,相反,我认为你应该用b.y
来获取值。Demo @ StackBlitz