Angular4+PrimeNG折线图：如何为每条线配置独立X/Y轴数据？

Hey there! I see you're trying to create a line chart where each series has its own independent X-axis (date) and Y-axis (payment amount) data, instead of sharing a global set of labels. Let's fix that issue where your chart isn't showing anything—here's how to make it work properly with Chart.js.

The Problem with Your Original Code #

Your first approach passed data: [this._billList, this.billDateList] for each dataset, which isn't the right format for Chart.js when you need per-point X/Y values. Chart.js expects either:

• A flat array of Y-values that map to shared global labels, or
• An array of objects where each object explicitly defines x and y properties for that data point.

Since your datasets have their own unique dates, we need to use the second approach.

The Fix: Use Object-Based Data Points #

For each dataset, you'll need to transform your separate date and amount arrays into an array of {x: date, y: amount} objects. Here's how to adjust your code:

First, pair your dates and amounts using Array.map():

// Transform BILL data into {x, y} objects
const billDataPoints = this._billList.map((amount, index) => ({
  x: this.billDateList[index],
  y: amount
}));

// Transform GRN data
const grnDataPoints = this._grnList.map((amount, index) => ({
  x: this.grnDateList[index],
  y: amount
}));

// Transform PAYMENT data
const paymentDataPoints = this._paymentList.map((amount, index) => ({
  x: this.paymentDateList[index],
  y: amount
}));

Then, update your data1 object to use these transformed data points:

this.data1 = {
  datasets: [
    {
      label: 'BILL',
      data: billDataPoints, // Use the transformed array
      fill: false,
      borderColor: '#565656'
    },
    {
      label: 'GRN',
      data: grnDataPoints,
      fill: false,
      borderColor: '#4bc0c0'
    },
    {
      label: 'PAYMENT',
      data: paymentDataPoints,
      fill: false,
      borderColor: '#42A5F5'
    }
  ]
};

Important: Configure the X-Axis for Dates #

To make sure Chart.js correctly parses and displays your dates on the X-axis, set the axis type to 'time' in your chart options. Here's an example initialization:

const chart = new Chart(document.getElementById('yourChartId'), {
  type: 'line',
  data: this.data1,
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day', // Adjust based on your date granularity (e.g., 'month', 'year')
          tooltipFormat: 'YYYY-MM-DD' // Date format for tooltips
        },
        title: {
          display: true,
          text: 'Date'
        }
      },
      y: {
        title: {
          display: true,
          text: 'Payment Amount'
        }
      }
    }
  }
});

Note: For Chart.js v3+, you'll need a time adapter (like chartjs-adapter-moment or chartjs-adapter-date-fns) to handle date parsing. Install it via npm or include the script in your project to get this working.

Why This Works #

By using {x, y} objects for each data point, each dataset can have its own unique set of dates and corresponding amounts. Chart.js will automatically plot each point at its correct X (date) and Y (amount) position, no shared global labels required.

内容的提问来源于stack exchange，提问作者Dipin raman