在chartjs中组合多个数据集

Question

目前我的折线图数据集中有 2 个点，如屏幕截图所示。 现在我想添加第四个数据集，如屏幕截图所示，它是非线性数据集。

但是第四个非线性数据集是一个计算数据集，它大约有 200-400 个点。

但问题是，第一个数据集（2 点数据集）被截断，因为我只有 2 点。 我想要实现的是，我想在图表上分布 2 点数据集，并在 x 轴上有 2 个刻度，即第一个日期和结束日期。

这是例子； https://stackblitz.com/edit/vitejs-vite-utbcv1?file=src%2FLineChart.tsx

这目前是一个例子；

这就是我想要实现的目标（非线性是大数据集）

Answer 1

您的数据不一定是值数组，也可以是

{x, y}

对数组。为了查看原始标签（月份），您可以使用

ticks

回调。

const ctx = document.getElementById('myChart').getContext('2d');

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

const demo = [20, 50, 22, 50, 65, 59, 80, 81, 56, 55, 20, 40]

const indexedData = demo.map((value, index) => ({
  x: index,
  y: value
}));

const data = {
  labels: labels,
  datasets: [{
      label: '2-point Series',
      data: [{
        x: 0,
        y: 50
      }, {
        x: demo.length - 1,
        y: 75
      }],
      borderColor: 'rgb(192, 18, 75)',
      tension: 0.4,
    },
    {
      label: '200-400 point Series',
      data: indexedData,
      borderColor: 'rgb(75, 192, 10)',
      tension: 0.4,
    }
  ]
};

new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    scales: {
      x: {
        type: 'linear',
        ticks: {
          callback: function(value, index, values) {
            return labels[Math.round(value)];
          },
        }
      },
      y: {
        min: 0,
        beginAtZero: true,
        max: 100,
      }
    },
    plugins: {
      legend: {
        position: 'top',
      },
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

<canvas id="myChart"></canvas>