AnyChart股票图表缺失数据点填充方法咨询

Hey there! I've got you covered on filling those missing time periods in your AnyChart stock chart with horizontal lines using the last closing price—this is totally the standard alternative to blank spaces, and I’ll tie it in with the scatter scale trick you already found.

Core Approach #

The key idea is to preprocess your raw data to fill in gaps with new data points where every price field (open, high, low, close) uses the last known closing price. This ensures those gaps render as horizontal lines instead of blank spaces. Pair this with the scatter X-scale you mentioned to maintain a linear timeline even with non-consecutive data points.

Step-by-Step Implementation #

1. Preprocess Data to Fill Gaps

First, create a helper function to iterate through your data, detect missing time intervals, and inject filler points using the last closing price:

// Sample raw data with missing dates (e.g., weekends/holidays)
const rawStockData = [
  ['2023-01-01', 100, 105, 98, 102],   // Date, Open, High, Low, Close
  ['2023-01-03', 102, 108, 100, 105],
  ['2023-01-06', 105, 110, 103, 108]
];

function fillMissingTimePeriods(data) {
  const filledData = [...data];
  const dateFormatter = 'yyyy-MM-dd';

  for (let i = 0; i < filledData.length - 1; i++) {
    const currentDate = anychart.format.parseDateTime(filledData[i][0], dateFormatter);
    const nextDate = anychart.format.parseDateTime(filledData[i+1][0], dateFormatter);
    const daysBetween = Math.round((nextDate - currentDate) / (1000 * 60 * 60 * 24));

    // Add filler points for each missing day
    for (let dayOffset = 1; dayOffset < daysBetween; dayOffset++) {
      const fillerDate = new Date(currentDate);
      fillerDate.setDate(fillerDate.getDate() + dayOffset);
      const formattedFillerDate = anychart.format.formatDateTime(fillerDate, dateFormatter);
      const lastClosePrice = filledData[i][4];

      // All price fields use the last closing price to create a horizontal line
      filledData.splice(i + dayOffset, 0, [
        formattedFillerDate,
        lastClosePrice,
        lastClosePrice,
        lastClosePrice,
        lastClosePrice
      ]);
    }
  }

  return filledData;
}

const completedData = fillMissingTimePeriods(rawStockData);

2. Configure the Chart with Scatter Scale

Now set up your stock chart with the processed data and apply the scatter X-scale to keep the timeline linear:

// Initialize stock chart
const chart = anychart.stock();
const mainPlot = chart.plot(0);

// Enable scatter scale for linear timeline rendering
chart.xScale('scatter');

// Add OHLC series with the completed data
const ohlcSeries = mainPlot.ohlc(completedData);
ohlcSeries.name('Stock Price (Gaps Filled)');

// Customize chart appearance (optional)
chart.title('Stock Chart with Missing Periods Filled by Last Closing Price');
mainPlot.yAxis().title('Price');

// Render the chart
chart.container('container');
chart.draw();

Key Details #

• The fillMissingTimePeriods function calculates the gap between consecutive data points, then inserts new points where every price value matches the last closing price. This creates a continuous horizontal line across the missing interval.
• Using chart.xScale('scatter') ensures the X-axis maintains a consistent linear scale, even when the original data has non-consecutive dates (like skipping weekends). Without this, the chart would compress the scale to fit only existing dates, which might distort the visual timeline.

内容的提问来源于stack exchange，提问作者Joshua Jenkins