使用ChartJS实现带堆叠背景区域的折线图遇问题

我明白你想要的是每层高度为20的堆叠区域（红色、橙色、青色各占20高度），但当前代码因为数据设置逻辑的问题，导致呈现出的是累计数值的效果。下面是问题分析和修正方案：

核心问题：堆叠区域图的数据逻辑误解 #

在Chart.js的堆叠模式下，每个数据集的data值代表的是该区域的自身高度，而非从底部到顶部的累计高度。Chart.js会自动将这些高度累加，实现堆叠效果。你之前设置橙色data: [40,40,40]、青色data: [60,60,60]，相当于让橙色区域高度为40、青色区域高度为60，这显然不是你想要的每层20的效果。

修正后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="areaChart" style="height:250px"></canvas>

<script>
$(function() {
  var areaChartCanvas = $('#areaChart').get(0).getContext('2d')
  
  var areaChartData = {
    labels: ['', '', ''],
    datasets: [
      // 最底层红色区域：自身高度20
      {
        backgroundColor: 'red',
        pointRadius: false,
        data: [20, 20, 20],
        type: 'line'
      },
      // 中间层橙色区域：自身高度20
      {
        backgroundColor: 'orange',
        pointRadius: false,
        data: [20, 20, 20],
        type: 'line'
      },
      // 最顶层青色区域：自身高度20
      {
        backgroundColor: 'cyan',
        pointRadius: false,
        data: [20, 20, 20],
        type: 'line'
      },
      // 黑色折线（放在最后，确保显示在所有区域上方）
      {
        backgroundColor: 'transparent',
        borderColor: 'black',
        pointRadius: false,
        data: [32, 12, 28],
        type: 'line'
      }
    ]
  }
  
  var areaChartOptions = {
    maintainAspectRatio: false,
    responsive: true,
    legend: { display: false },
    scales: {
      xAxes: [{ gridLines: { display: true } }],
      yAxes: [{
        gridLines: { display: true },
        stacked: true,
        ticks: {
          beginAtZero: true, // y轴从0开始
          stepSize: 20 // 刻度间隔匹配每层高度
        }
      }]
    },
    elements: {
      line: { fill: true } // 确保区域填充生效
    }
  }
  
  var areaChart = new Chart(areaChartCanvas, {
    type: 'line',
    data: areaChartData,
    options: areaChartOptions
  })
})
</script>

关键修改点说明 #

• 数据调整：将三个颜色区域的data统一设为[20,20,20]，让每个区域自身高度都是20，堆叠后总高度60，完全符合你的预期。
• 数据集顺序：把黑色折线数据集放在最后，这样它会绘制在所有堆叠区域的上方，避免被颜色区域遮挡。
• y轴优化：开启beginAtZero让刻度从0开始，设置stepSize:20让刻度间隔和每层高度对应，图表更直观。
• 明确类型：为所有数据集指定type: 'line'，避免类型混淆，确保区域填充逻辑正确。

这样修改后，你就能得到每层高度20的堆叠区域图，红色在最底层（0-20）、橙色在中间（20-40）、青色在顶层（40-60），黑色折线在上方正常显示。

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