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

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

花韻仙語

发布： 2025-10-07 14:39:00

原创

734人浏览过

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

本文将介绍如何使用 ApexCharts 创建固定宽度的堆叠水平条形图。通过设置 width 属性，我们可以确保每个条形都具有相同的宽度，而不会受到数据值的影响，从而实现更清晰和一致的可视化效果。

ApexCharts 是一款功能强大的 JavaScript 图表库，提供了丰富的图表类型和自定义选项。在创建堆叠水平条形图时，默认情况下，条形的宽度会根据数据值的大小自动调整。然而，在某些情况下，我们可能需要固定条形的宽度，以便更好地比较不同类别的数据。

实现固定宽度条形图的关键在于 chart 选项中的 width 属性。该属性允许我们指定条形的固定宽度，从而忽略数据值的影响。

以下是一个简单的示例，演示如何使用 width 属性创建固定宽度的堆叠水平条形图：

var options = {
  chart: {
    type: 'bar',
    height: 350,
    width: 150, // 设置固定宽度为 150 像素
    stacked: true,
  },
  series: [{
    name: 'Product A',
    data: [44, 55, 41, 64, 22, 43, 21]
  }, {
    name: 'Product B',
    data: [53, 32, 33, 52, 13, 44, 32]
  }, {
    name: 'Product C',
    data: [12, 17, 11, 9, 15, 19, 20]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
  },
  yaxis: {
    title: {
      text: undefined
    },
  },
  fill: {
    opacity: 1
  },
  legend: {
    position: 'top',
    horizontalAlign: 'left',
    offsetX: 40
  }
};

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

登录后复制

在这个例子中，chart.width 被设置为 150，这意味着每个条形都将具有 150 像素的固定宽度，而不管其对应的数据值是多少。