如何创建固定宽度的堆叠水平条形图-html教程-PHP中文网

如何创建固定宽度的堆叠水平条形图

碧海醫心

发布： 2025-10-07 11:50:02

原创

228人浏览过

如何创建固定宽度的堆叠水平条形图

本文将介绍如何使用 ApexCharts 创建固定宽度的堆叠水平条形图。通过设置 width 属性，可以确保每个条形具有一致的宽度，而与数据值无关。这对于需要在视觉上强调不同类别之间的比较，而不是绝对数值大小的场景非常有用。

ApexCharts 是一款功能强大的 JavaScript 图表库，它提供了丰富的图表类型和自定义选项。其中，堆叠水平条形图是一种常用的数据可视化方式，可以将不同类别的数据堆叠在一起，方便比较各个类别的总和以及各个子类别的贡献。

然而，默认情况下，ApexCharts 的条形图宽度是根据数据值自动调整的，这在某些情况下可能不是我们想要的效果。例如，我们可能希望所有条形具有相同的宽度，以便更好地比较不同类别之间的差异，而不是关注绝对数值的大小。

要实现固定宽度的堆叠水平条形图，我们可以使用 ApexCharts 的 chart 选项中的 width 属性。

以下是一个示例代码：

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

var options = {
  chart: {
    type: 'bar',
    height: 350,
    width: 150, // 设置固定宽度
    stacked: true
  },
  series: [{
    name: '类别 A',
    data: [44, 55, 41, 64, 22, 43, 21]
  }, {
    name: '类别 B',
    data: [53, 32, 33, 52, 13, 44, 32]
  }, {
    name: '类别 C',
    data: [12, 17, 11, 9, 15, 19, 20]
  }],
  xaxis: {
    categories: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

登录后复制

在上面的代码中，我们通过设置 chart.width = 150 来指定所有条形图的宽度为 150 像素。这样，无论数据值的大小如何，所有条形都将具有相同的宽度。

注意事项：