请求实现X轴无限循环重复显示指定工作日序列的功能

Hey Gianfranco, I totally get how frustrating it is when you’re hunting for what feels like a basic implementation and come up empty-handed. Let’s walk through a straightforward solution to get your X-axis cycling through Mon Tue Wed Thu Wed Sat Sun indefinitely until your Y-axis stops receiving data.

Core Logic: Repeating the Weekday Sequence #

First, we’ll handle the core part: generating the repeating labels. Whether your Y-axis data is static or dynamically loaded, we can adapt this logic:

1. For Static Y-Data (Fixed Number of Points)

If you already have all your Y-axis data upfront, just generate a list of labels that matches the length of your data by cycling through your base sequence:

const baseWeekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Wed', 'Sat', 'Sun'];

function generateCycledLabels(dataLength) {
  const labels = [];
  for (let i = 0; i < dataLength; i++) {
    labels.push(baseWeekdays[i % baseWeekdays.length]);
  }
  return labels;
}

// Example usage: if Y-data has 15 points
const yData = [12, 34, 22, 45, 33, 51, 29, 40, 36, 55, 28, 42, 30, 50, 38];
const xLabels = generateCycledLabels(yData.length);
console.log(xLabels); // Will cycle through your sequence 2 full times + 1 extra day

2. For Dynamic Y-Data (Infinite Until Data Stops)

If your Y-axis data is streaming in (and you need the X-axis to cycle until data stops), use a timer to add labels incrementally and handle horizontal scrolling:

HTML Setup

<!-- Container for X-axis labels (enables horizontal scrolling) -->
<div style="width: 90%; margin: 0 auto; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid #ddd; padding: 8px 0;">
  <div id="x-axis-container"></div>
</div>

<!-- Optional: Add your Y-axis chart here (e.g., Canvas for line/bar chart) -->
<canvas id="y-axis-chart" width="800" height="400"></canvas>

JavaScript Implementation

const baseWeekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Wed', 'Sat', 'Sun'];
const xAxisContainer = document.getElementById('x-axis-container');
let currentSequenceIndex = 0;
let isDataStreaming = true; // Toggle this when Y-data stops loading

// Simulate streaming Y-data (replace with your actual data source logic)
const yDataStream = setInterval(() => {
  if (!isDataStreaming) {
    clearInterval(yDataStream);
    return;
  }

  // Add next cycled weekday label
  const nextDay = baseWeekdays[currentSequenceIndex % baseWeekdays.length];
  const labelElement = document.createElement('span');
  labelElement.textContent = nextDay;
  labelElement.style.display = 'inline-block';
  labelElement.style.minWidth = '70px';
  labelElement.style.textAlign = 'center';
  labelElement.style.fontFamily = 'Arial, sans-serif';
  xAxisContainer.appendChild(labelElement);

  // Scroll to show the latest label
  xAxisContainer.scrollLeft = xAxisContainer.scrollWidth;

  // Add corresponding Y-data point (replace with your actual data)
  const newYValue = Math.floor(Math.random() * 60) + 10;
  // Update your chart with newYValue here (e.g., using Chart.js)

  currentSequenceIndex++;
}, 1200); // Adjust interval to match your data update rate

// Call this function when Y-data stops loading
function stopDataStream() {
  isDataStreaming = false;
}

Key Notes #

• The % (modulo) operator is the magic here—it lets us loop back to the start of the base sequence once we reach the end.
• The horizontal scrolling is handled by setting overflow-x: auto on the container, so users can scroll back to view previous labels if needed.
• If you’re using a chart library like Chart.js, you can plug the generated labels directly into the labels field of your chart config, and update it dynamically for streaming data.

This should cover both static and dynamic use cases, and it’s lightweight enough to adapt to whatever setup you’re working with.

内容的提问来源于stack exchange，提问作者Gianfranco Bona