Chart.js绘制带限制线的堆叠条形图

// 引入Chart.js库
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

// 创建一个canvas元素来显示图表
<canvas id="myChart"></canvas>

// 获取canvas元素的上下文
var ctx = document.getElementById('myChart').getContext('2d');

// 定义数据系列的标签和颜色
var labels = ['数据系列1', '数据系列2', '数据系列3'];
var colors = ['#ff6384', '#36a2eb', '#ffce56'];

// 定义数据系列的数据
var dataSeries1 = [10, 20, 30];
var dataSeries2 = [15, 25, 35];
var dataSeries3 = [5, 15, 25];

// 定义限制线的值和样式
var limitLineValue = 25;
var limitLineColor = 'rgba(255, 99, 132, 0.5)';

// 创建堆叠条形图
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: '数据系列1',
      data: dataSeries1,
      backgroundColor: colors[0],
      stack: 'Stack 0'
    }, {
      label: '数据系列2',
      data: dataSeries2,
      backgroundColor: colors[1],
      stack: 'Stack 0'
    }, {
      label: '数据系列3',
      data: dataSeries3,
      backgroundColor: colors[2],
      stack: 'Stack 0'
    }]
  },
  options: {
    scales: {
      x: {
        stacked: true
      },
      y: {
        stacked: true
      }
    },
    plugins: {
      annotation: {
        annotations: {
          limitLine: {
            type: 'line',
            yMin: limitLineValue,
            yMax: limitLineValue,
            borderColor: limitLineColor,
            borderWidth: 2
          }
        }
      }
    }
  }
});