使用AnyChart v8与Angular CLI 10绘制时间线图表遇NaN错误求助

Hey there! Let’s dig into why your timeline chart is throwing that Error: attribute d: Expected number, "M NaN 56.5 L NaN 5…" error when using dynamic data from Sequelize—even though hardcoded data works perfectly. That error tells us AnyChart is trying to render SVG paths with non-numeric values (specifically NaNs), so let’s walk through the most likely fixes:

1. Verify Your Date-to-Numeric Conversion #

AnyChart’s datetime axes rely on numeric Unix timestamps (milliseconds since epoch) to render correctly. If your Sequelize data is returning Date objects or ISO date strings instead of raw numbers, that’s probably the issue.

• Check what Sequelize returns: By default, Sequelize may return Date objects or ISO strings for date fields. Convert these to numeric timestamps explicitly:

  // Example conversion from Sequelize raw data
  const processedData = rawSequelizeData.map(item => ({
    x: item.yourDateField.getTime(), // Convert Date object to ms timestamp
    y: item.yourValueField
  }));
  

• Debug this step: Add a console log to confirm your x-values are valid numbers:

  console.log("Processed data points:", processedData.map(p => ({xType: typeof p.x, xValue: p.x, y: p.y})));
  

  If you see xType: "string" or xValue: NaN here, that’s the root cause.

2. Filter Out Invalid/Missing Data #

Even if your dates are correct, missing or null values in your y field can introduce NaNs that break the chart:

• Add a filter to clean your data before passing it to AnyChart:

  const cleanData = rawSequelizeData
    .filter(item => item.yourValueField != null && !isNaN(item.yourValueField))
    .map(item => ({
      x: item.yourDateField.getTime(),
      y: item.yourValueField
    }));
  

3. Ensure Chart Initialization Happens After Data Loads #

In Angular, it’s easy to accidentally initialize the chart before your Sequelize data finishes loading. Make sure you’re triggering the chart’s draw() method only after your data is ready:

• Use an observable with async pipe in your template to wait for data:

  <!-- Template: Only render the chart container when data exists -->
  <div *ngIf="chartData$ | async as chartData" id="chart-container"></div>
  

• In your component, initialize the chart inside the data subscription:

  chartData$: Observable<any[]>;
  
  ngOnInit() {
    this.chartData$ = this.yourDataService.fetchData().pipe(
      map(rawData => /* your data conversion logic here */)
    );
  
    // Or if using a direct subscription:
    this.yourDataService.fetchData().subscribe(rawData => {
      const cleanData = /* process data */;
      this.renderChart(cleanData); // Call chart render only after data is ready
    });
  }
  

4. Double-Check Your X-Axis Configuration #

Make sure your AnyChart x-axis is explicitly set to datetime type—if it’s using a linear or categorical axis, valid timestamps might still be parsed incorrectly:

const chart = anychart.line();
const xAxis = chart.xAxis();
xAxis.type('datetime'); // Critical for timeline charts

5. Debug AnyChart’s Received Data #

After setting the chart data, log what AnyChart actually receives to confirm there are no hidden issues:

chart.data(cleanData);
console.log("AnyChart received data:", chart.data());

Check every x and y value—if any are NaN, you’ll need to trace back to why your conversion logic isn’t catching them.

内容的提问来源于stack exchange，提问作者Daphné Moonstone