[英]Chartjs with zoom plugins, how to set limit data show on chart
我使用 Angular v13 和 chartjs v3,我还安装了 chartjs-plugin-zoom,它非常适合条形图,但对于时间条形图,它不能按预期工作,这是我的问题:
当我从 api 获取数据时,例如 24 小时内的 50 条记录并在图表中显示,我只想显示 10 个条形图(用户可以向左或向右平移以查看下一个数据)但图表始终显示所有条形图
我想让它像这样显示,我按日期获取数据,10 个日期显示总是 10 个或更少的条
那么如何归档条形图显示的限制数量呢? 就像我得到超过 10 条记录,如何让它只显示 10 条,然后用户可以向左平移以查看下一个数据
我在图表中使用了一些选项
{
animation: {
duration: 0,
},
maintainAspectRatio: false,
responsive: true,
scales: {
y: {
beginAtZero: true,
grid: {
drawBorder: false,
},
grace: '10%',
},
x: {
grid: {
display: false,
},
type: 'time',
display: true,
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
day: ChartOptionConstants.DATE_FORMAT,
},
},
title: {
display: true,
text: 'DOC',
},
ticks: {
autoSkip: true,
maxRotation: 0,
maxTicksLimit: 8
},
},
},
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
title: {
display: false,
text: this.chartTitle,
},
legend: {
display: true,
labels: {
font: {
size: 9,
},
usePointStyle: true,
},
},
tooltip: {
position: 'top',
caretSize: 0,
},
},
};
缩放插件选项
{
pan: {
enabled: true,
mode: 'x',
},
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
mode: 'x',
},
};
缩放插件在其配置中提供了limits
节点,您可以在其中设置轴上的限制。
也许它可以帮助您的用例: https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html#limits
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.