ChartJS 带有缩放插件的图表,如何设置图表上显示的限制数据

qnzebej0  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(168)

我的工作与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',
  },
};
kupeojn6

kupeojn61#

缩放插件在其配置中提供了limits节点,您可以在其中设置轴上的限制。
也许它可以帮助您的使用案例:https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html#limits

相关问题