如何在Chart.js中实现分组堆叠柱状图并为多数据集配置渐变颜色

你当前代码的问题主要出在三点：

• 渐变仅配置了终止色标，缺少起始色标，导致没有渐变过渡效果
• 渐变高度固定写死，不会随画布尺寸自适应，渲染出来的渐变效果不符合预期
• 未配置数据集的stack分组属性，无法实现分组堆叠的并排柱效果

具体修改步骤 #

1. 调整渐变创建逻辑 #

动态获取画布高度生成渐变，同时添加两个色标实现从浅到深的渐变效果：

var ctx = document.getElementById("ticketsChart").getContext("2d");
// 取画布实际高度作为渐变的垂直范围
const canvasHeight = ctx.canvas.height;
// 待处理工单渐变：顶部浅蓝，底部深蓝
var openTicketGradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
openTicketGradient.addColorStop(0, 'rgba(66, 199, 241, 0.2)');
openTicketGradient.addColorStop(1, 'rgb(66, 199, 241)');
// 已关闭工单渐变：顶部浅灰，底部深灰
var closedTicketGradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
closedTicketGradient.addColorStop(0, 'rgba(156, 163, 175, 0.2)');
closedTicketGradient.addColorStop(1, 'rgb(156, 163, 175)');

2. 配置数据集的stack分组属性 #

给两个数据集添加不同的stack值，实现同一月份下两组柱并排显示，每组内部可堆叠（如果后续有子数据集可以直接加到对应stack组下）：

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Oct', 'Nov', 'Dec'],
  datasets: [{
      label: 'Open Tickets',
      data: [8, 2, 3, 4, 15, 6, 7, 8, 9, 2, 11, 5],
      backgroundColor: openTicketGradient,
      barThickness: 24,
      stack: 'open' // 待处理工单归为open组
    },
    {
      label: 'Closed Tickets',
      data: [0, 0, 12, 1, 2, 0, 0, 0, 0, 0, 1, 12],
      backgroundColor: closedTicketGradient,
      barThickness: 24,
      stack: 'closed' // 已关闭工单归为closed组
    }
  ]
};

3. 保留原有轴配置 #

x轴和y轴的stacked: true配置不需要修改，即可实现分组堆叠效果。

完整修改后的JS代码 #

const primaryColorRGB = 'rgb(66, 199, 241)';
const grayColorRGB = 'rgb(156, 163, 175)';

function maxValue(arr) {
  let max = arr[0];
  for (let val of arr) {
    if (val > max) {
      max = val;
    }
  }
  return max;
}

function getMaxValue(array) {
  var max = maxValue(array);
  if (max <= 1000) {
    return max + 300;
  } else if (max >= 1000 && max < 2000) {
    return max + 500;
  } else if (max >= 2000 && max < 3000) {
    return max + 700;
  } else if (max >= 3000 && max < 5000) {
    return max + 900;
  } else {
    return max + 1000;
  }
}

var ctx = document.getElementById("ticketsChart").getContext("2d");
const canvasHeight = ctx.canvas.height;
// 生成待处理工单渐变
var openTicketGradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
openTicketGradient.addColorStop(0, 'rgba(66, 199, 241, 0.2)');
openTicketGradient.addColorStop(1, primaryColorRGB);
// 生成已关闭工单渐变
var closedTicketGradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
closedTicketGradient.addColorStop(0, 'rgba(156, 163, 175, 0.2)');
closedTicketGradient.addColorStop(1, grayColorRGB);

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Oct', 'Nov', 'Dec'],
  datasets: [{
      label: 'Open Tickets',
      data: [8, 2, 3, 4, 15, 6, 7, 8, 9, 2, 11, 5],
      backgroundColor: openTicketGradient,
      barThickness: 24,
      stack: 'open'
    },
    {
      label: 'Closed Tickets',
      data: [0, 0, 12, 1, 2, 0, 0, 0, 0, 0, 1, 12],
      backgroundColor: closedTicketGradient,
      barThickness: 24,
      stack: 'closed'
    }
  ]
};

const ticketsChartConfig = {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      title: {
        display: false,
        text: 'Chart.js Bar Chart - Stacked'
      },
      legend: {
        position: "bottom",
        labels: {
          usePointStyle: true,
          padding: 23,
        },
      },
    },
    responsive: true,
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    },
  }
};

var elm = document.getElementById('ticketsChart');
var currentProjectsChart = new Chart(elm, ticketsChartConfig);

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