Angular v13 + Chart.js v3 结合chartjs-plugin-zoom实现时间条形图固定显示条数并支持平移的方案

To fix your issue where the time-scaled bar chart shows all data instead of a fixed number of bars (with pan support for remaining data), you need to manually define the initial time range for the x-axis and configure the scale to respect that range while allowing panning. Here's how to adjust your setup:

Step 1: Calculate Initial Visible Time Range #

After fetching your data from the API, compute the initial time bounds to show only your target number of bars (e.g., 10). This ensures the chart starts with exactly that subset of data.

// Assume your API returns data in this structure: { x: string/Date, y: number }[]
const chartData = await this.yourApiService.fetchData();
const maxVisibleBars = 10; // Adjust this to your desired count
let initialMin: Date, initialMax: Date;

if (chartData.length > maxVisibleBars) {
  // Show the most recent 10 bars (adjust startIdx if you want the oldest 10)
  const startIdx = chartData.length - maxVisibleBars;
  initialMin = new Date(chartData[startIdx].x);
  initialMax = new Date(chartData[chartData.length - 1].x);
} else {
  // Show all data if there are fewer than 10 entries
  initialMin = new Date(chartData[0].x);
  initialMax = new Date(chartData[chartData.length - 1].x);
}

Step 2: Update Chart Configuration #

Modify your existing x-axis scale settings to include the computed min/max bounds, add a restriction to prevent panning outside your data range, and adjust tick limits to match your target bar count:

{
  animation: { duration: 0 },
  maintainAspectRatio: false,
  responsive: true,
  scales: {
    y: {
      beginAtZero: true,
      grid: { drawBorder: false },
      grace: '10%',
    },
    x: {
      grid: { display: false },
      type: 'time',
      display: true,
      min: initialMin, // Set initial visible range start
      max: initialMax, // Set initial visible range end
      bounds: 'data', // Prevent panning beyond your full dataset
      time: {
        unit: 'day', // Adjust this to 'hour' for your 24-hour dataset
        unitStepSize: 1,
        displayFormats: { day: ChartOptionConstants.DATE_FORMAT },
      },
      title: { display: true, text: 'DOC' },
      ticks: { 
        autoSkip: true, 
        maxRotation: 0, 
        maxTicksLimit: maxVisibleBars // Match your target bar count
      },
    },
  },
  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 },
    zoom: { // Keep your existing zoom/pan config
      pan: { enabled: true, mode: 'x' },
      zoom: { wheel: { enabled: true }, pinch: { enabled: true }, mode: 'x' },
    }
  },
};

Key Notes: #

• Adjust unit for different datasets: For your 24-hour/50-record dataset, set unit: 'hour' instead of 'day' to ensure the scale aligns with your bar intervals.
• Control initial subset: If you want to start with the oldest 10 bars instead of the newest, set startIdx = 0 and initialMax = new Date(chartData[maxVisibleBars - 1].x).
• Data parsing: Ensure your x values are in a format Chart.js can parse (ISO strings or Date objects). If using custom formats, add a parser function to the time config (e.g., parser: 'YYYY-MM-DD HH:mm').

With these changes, your chart will initially display exactly the number of bars you specify, and users can pan left/right using the zoom plugin to view the rest of the dataset.

内容的提问来源于stack exchange，提问作者Khánh Trần Hoàng