如何显示堆叠折线图

要显示堆叠折线图，您可以使用各种数据可视化库，如 Chart.js 或 D3.js。以下是使用 Chart.js 库创建堆叠折线图的示例代码：

首先，确保您已经在项目中安装了 Chart.js。然后，创建一个 HTML 元素来容纳图表：

<canvas id="stackedLineChart"></canvas>

接下来，使用 JavaScript 代码来配置和绘制堆叠折线图：

// 获取 canvas 元素
const canvas = document.getElementById('stackedLineChart');

// 配置数据
const data = {
  labels: ['January', 'February', 'March', 'April', 'May'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [10, 20, 30, 40, 50],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255, 99, 132, 1)',
      borderWidth: 1,
      fill: true
    },
    {
      label: 'Dataset 2',
      data: [20, 30, 40, 50, 60],
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1,
      fill: true
    },
    // 添加更多数据集...
  ]
};

// 配置选项
const options = {
  scales: {
    x: {
      display: true,
      title: {
        display: true,
        text: 'Month'
      }
    },
    y: {
      display: true,
      title: {
        display: true,
        text: 'Value'
      }
    }
  }
};

// 创建堆叠折线图
const stackedLineChart = new Chart(canvas, {
  type: 'line',
  data: data,
  options: options
});

在上述代码中，我们使用 Chart.js 创建了一个堆叠折线图。通过配置 data 对象中的 datasets 数组，您可以添加多个数据集，并为每个数据集指定标签、数据、背景颜色、边框颜色等属性。通过配置 options 对象，您可以自定义图表的各种选项，如坐标轴的显示和标题。