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

Question

我使用 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',
  },
};

Answer 1

缩放插件在其配置中提供

limits

节点，您可以在其中设置轴上的限制。

也许它可以帮助您的用例：https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html#limits

Answer 2

这对我有用。您可以将其硬编码为图表配置中的缩放限制，如下所示。

const config = {
    type: 'line',
    data: data,
    options: {
        animation: false,
        spanGaps: true,
        showLine: true,
        animation: {
            duration: 0 // general animation time
        },
        hover: {
            animationDuration: 0 // duration of animations when hovering an item
        },
        responsiveAnimationDuration: 0, // animation duration after a resize
        autoSkipPadding: 100,
        plugins: {
            zoom: {
                limits: {
                    x: {
                          minRange: getMinZoomRange(), // This is smallest time window you want to zoom into
                          min: 1680516080000,
                          max: 1680616080000,
                    },
                },
                pan: {
                    enabled: true,
                    mode: 'x'
                },
                zoom: {
                    wheel: {
                        enabled: true,
                    },
                    pinch: {
                        enabled: true
                    },
                    mode: 'x',
                }
            }
        },
        scales: {
            x: {
                type: 'time',
                time: {
                    // tooltipFormat: "yyyy-MMM-dd HH:mm",
                    displayFormats: {
                        day: "d-MMM HH:mm",
                        millisecond: "HH:mm:ss.SSS",
                        second: "HH:mm:ss",
                        minute: "HH:mm",
                        hour: "d-MMM HH:mm",
                    },
                    // unit: granularity.toLowerCase(),
                },
                // min: 0,
                // max: 0,
                ticks: {
                    source: 'auto'
                },
                displayFormats: {
                    second: 'MMM YYYY'
                }
            },
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Time in Seconds'
                }
            },
            requests: {
                type: 'linear',
                position: 'right',
                min: 0,
                max: 100
            }
        }
    }
};

然后您可以像下面这样以编程方式更改它。

dataChart

是图表对象。

dataChart.config.options.plugins.zoom.limits.x.min = appDataSet['timeStamps'][0];
dataChart.config.options.plugins.zoom.limits.x.max = appDataSet.timeStamps[appDataSet['timeStamps'].length - 1];