如何在ChartJS中创建表格格式的图表？

你需要的这类带单元格分色、数值展示的表格形态图表本质是分类矩阵热力图，直接使用 Chart.js 官方生态的矩阵图插件即可实现，具体步骤如下：

• 第一步：安装依赖
  优先使用 chartjs-chart-matrix 官方矩阵图插件，搭配 chartjs-plugin-datalabels 实现单元格数值显示，npm 安装命令为：
  npm install chart.js chartjs-chart-matrix chartjs-plugin-datalabels
  也可以直接通过 CDN 引入对应资源。
• 第二步：基础配置示例

  import { Chart, registerables } from 'chart.js';
  import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
  import ChartDataLabels from 'chartjs-plugin-datalabels';
  
  // 注册组件
  Chart.register(...registerables, MatrixController, MatrixElement, ChartDataLabels);
  
  new Chart('chart容器ID', {
    type: 'matrix',
    data: {
      datasets: [{
        // 每个数据项对应x(列名)、y(行名)、v(单元格数值)
        data: [
          {x: '一季度', y: '部门A', v: 21},
          {x: '二季度', y: '部门A', v: 14},
          {x: '一季度', y: '部门B', v: 8},
          {x: '二季度', y: '部门B', v: 17},
          // 其余单元格按相同格式补充
        ],
        // 按数值自定义单元格颜色，可自行调整色阶规则
        backgroundColor(context) {
          const val = context.dataset.data[context.dataIndex].v;
          if (val >= 20) return '#ef4444';
          if (val >= 15) return '#f97316';
          if (val >= 10) return '#eab308';
          return '#22c55e';
        },
        borderColor: '#ffffff',
        borderWidth: 1,
        // 自动适配单元格宽高
        width: ({chart}) => chart.scales.x.width / chart.scales.x.ticks.length - 2,
        height: ({chart}) => chart.scales.y.height / chart.scales.y.ticks.length - 2
      }]
    },
    options: {
      scales: {
        x: {
          type: 'category',
          position: 'top', // 列标题置于顶部对齐表格使用习惯
          grid: {display: false}
        },
        y: {
          type: 'category',
          offset: true,
          grid: {display: false}
        }
      },
      plugins: {
        legend: {display: false},
        tooltip: {
          callbacks: {
            label: (ctx) => `数值：${ctx.raw.v}`
          }
        },
        // 配置单元格内数值显示
        datalabels: {
          display: true,
          color: '#000000',
          formatter: (val) => val.v
        }
      }
    }
  });
  

• 额外优化说明
  如果你不想引入额外插件，也可以用原生堆叠柱状图改造：将每个分类对应一个柱子，设置固定宽高排列为网格形态，不过自定义成本远高于使用官方插件，更推荐前者。

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