使用Chart.js创建水平条形图时遇到数据填充与展示问题求助

你的代码核心问题有两个：

1. 解析配置错误：因为设置了indexAxis: 'y'（水平条形图），y轴是类别轴，x轴是数值轴，所以应该用xAxisKey指定数值字段，而非yAxisKey；
2. 数据结构不匹配：Chart.js无法直接解析数组类型的products.sales作为数据点，需要根据需求调整数据格式。

从你提供的[min, max]格式sales数据来看，目标应该是实现范围水平条形图（每个类别对应一个从min到max的条形），以下是修正后的代码：

修正后的代码 #

const labels = ['s', 'a', 'd'];
// 原始数据
const rawData = [
  {products: { sales: [0, 5], id: 1 } },
  {products: { sales: [5, 10], id: 2 } },
  {products: { sales: [10, 15], id: 3 } },
];

// 转换数据：拆分起始值和范围差值
const startValues = rawData.map(item => item.products.sales[0]);
const rangeValues = rawData.map(item => item.products.sales[1] - item.products.sales[0]);

const data = {
  labels: labels,
  datasets: [
    // 占位数据集：用于填充起始值到0的空白区域
    {
      label: 'Start',
      data: startValues,
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      borderWidth: 0,
    },
    // 实际展示的范围条形数据集
    {
      label: 'Sales Range',
      data: rangeValues,
      backgroundColor: [
        'rgba(255, 26, 104, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ],
      borderColor: [
        'rgba(255, 26, 104, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1
    }
  ]
};

const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y', // 水平条形图配置
    scales: {
      x: {
        beginAtZero: true,
        stacked: true // 开启堆叠，让两个数据集的条形叠加
      },
      y: {
        beginAtZero: true
      }
    },
    legend: {
      display: false // 隐藏图例，避免占位数据集干扰
    }
  }
};

// 初始化图表
const myChart = new Chart(
  document.getElementById('myChart'),
  config
);

关键调整说明 #

• 数据转换：将原始的[min, max]数组拆分为起始值和范围差值，通过堆叠两个数据集模拟范围条形效果；
• 堆叠配置：开启x轴的stacked: true，让占位条形和实际范围条形叠加，实现从min到max的视觉效果；
• 结构简化：移除无效的parsing配置，直接使用数值数组作为数据集的data，符合Chart.js的要求；
• 样式优化：将占位数据集设为透明，隐藏图例，只展示核心的范围条形。

如果你的需求是每个类别对应两个独立条形（分别展示sales的两个数值），可以使用以下代码：

const labels = ['s', 'a', 'd'];
const rawData = [
  {products: { sales: [0, 5], id: 1 } },
  {products: { sales: [5, 10], id: 2 } },
  {products: { sales: [10, 15], id: 3 } },
];

const data = {
  labels: labels,
  datasets: [
    {
      label: 'Min Sales',
      data: rawData.map(item => item.products.sales[0]),
      backgroundColor: 'rgba(255, 26, 104, 0.2)',
      borderColor: 'rgba(255, 26, 104, 1)',
      borderWidth: 1
    },
    {
      label: 'Max Sales',
      data: rawData.map(item => item.products.sales[1]),
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }
  ]
};

const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      x: {
        beginAtZero: true
      }
    }
  }
};

内容的提问来源于stack exchange，提问作者Paul Anthony Ragsac