Chart.js堆叠柱状图：如何处理无对应变体的产品数据

针对你遇到的问题，核心是通过标记无效数据为null并配置Tooltip过滤规则来实现只显示产品实际存在的许可项，具体步骤如下：

1. 修改数据集生成逻辑，用null替代0 #

把不存在的许可项设为null（Chart.js会忽略null值的绘制，同时保持数据集长度一致）：

const products = Object.keys(product_variant_sales);
const variants = ["Full", "Upgrade"];
const product_variant_sales_datasets = variants.map(variant => {
  return {
    label: variant,
    data: products.map(product => {
      return product_variant_sales[product][variant] ?? null; // 用null替换0
    }),
    backgroundColor: `rgb(38,96,137,${variant === "Full" ? 1 : 0.8})`,
  }
});

2. 配置Tooltip过滤规则 #

在图表初始化的options.plugins.tooltip中添加过滤逻辑，只保留有有效数据的项：

new Chart(document.getElementById("product_sales"), {
  type: 'bar',
  data: {
    labels: products,
    datasets: product_variant_sales_datasets,
  },
  options: {
    interaction: {
      intersect: false,
      mode: 'x',
      position: 'nearest',
    },
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        // 过滤掉值为null的数据集条目
        filter: (context) => context.parsed.y !== null,
        // 自定义标签格式（可选，保证显示清晰）
        callbacks: {
          label: (context) => `${context.dataset.label}: ${context.parsed.y}`
        }
      }
    },
    scales: {
      x: {
        stacked: true,
        border: {
          color: "#254b5d",
        },
        grid: {
          color: "#254b5d",
        }
      },
      y: {
        stacked: true
      }
    },
  }
});

效果说明 #

• 视觉上：null值对应的柱状部分不会被绘制，堆叠效果保持正常；
• hover交互：Tooltip只会显示当前产品实际存在的许可项，不会出现“Upgrade: 0”这类误导性内容。

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