我的工作与Angular v13和chartjs v3,我也安装chartjs-plugin-zoom,它的工作完美的条形图,但对于时间条形图,它没有工作的预期,这里是我的问题:
当我从api获取数据时,例如24小时内有50条记录,我将其显示在图表中,我只想显示10个条形(用户可以向左或向右平移以查看下一个数据),但图表始终显示所有条形
24 hours time bar chart
我想让它像这样显示,这我按日期获取数据,10个日期显示总是10个或更少条
10 days time bar chart
那么,如何将条形图显示的限制数量归档呢?比如我得到了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',
},
};
1条答案
按热度按时间kupeojn61#
缩放插件在其配置中提供了
limits
节点,您可以在其中设置轴上的限制。也许它可以帮助您的使用案例:https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html#limits