ApexCharts 分组堆叠条形图故障排除：常见的错误及其修复方法

javascript

2024-03-14 03:25:52

ApexCharts 分组堆叠条形图故障排除：诊断和修复

在数据可视化的世界中，条形图一直是展示不同类别或时间段数据的首选。ApexCharts，一个著名的 JavaScript 库，以其创建交互式图表的能力而闻名，包括分组堆叠条形图。然而，在某些情况下，这些条形图可能会出现问题，令人沮丧不已。

问题症状

尽管官方演示展示了清晰的分组堆叠条形图，但你可能遇到这样一个问题：条形图堆叠成一条线，而不是分隔成不同的组。尽管你采取了清除缓存和尝试无痕模式等措施，但问题依然存在。

疑难解答

为了诊断并解决这一问题，我们需要仔细检查影响 ApexCharts 分组堆叠条形图表现的几个关键因素：

数据结构： 确保你的数据结构符合 ApexCharts 要求。每个系列应包含 name 和 data 属性，data 数组应包含与类别数相同的数值。
堆叠选项： stacked 选项控制条形图的堆叠行为。确保将其设置为 true 以启用堆叠功能。
分组选项： 对于分组堆叠条形图，每个系列应具有一个 group 属性，将属于同一组的系列分组在一起。
分类选项： xaxis.categories 选项定义了条形图的类别。确保此数组与 data 数组中的元素数量一致。
填充选项： fill.opacity 选项控制条形图条的填充不透明度。确保此选项设置为非零值以使条形图可见。

解决方案

通过检查这些因素并根据需要进行调整，你可以解决 ApexCharts 分组堆叠条形图的故障问题。以下是修复程序的总结：

确保数据结构正确。
启用堆叠选项 (stacked: true)。
分组系列（通过 group 属性）。
定义分类（使用 xaxis.categories）。
设置填充不透明度（fill.opacity）。

示例代码

为了演示正确的实现，这里是一个 ApexCharts 分组堆叠条形图的示例代码：

var options = {
  series: [
    {
      name: 'Q1 Budget',
      group: 'budget',
      data: [44000, 55000, 41000, 67000, 22000]
    },
    {
      name: 'Q1 Actual',
      group: 'actual',
      data: [48000, 50000, 40000, 65000, 25000]
    },
    {
      name: 'Q2 Budget',
      group: 'budget',
      data: [13000, 36000, 20000, 8000, 13000]
    },
    {
      name: 'Q2 Actual',
      group: 'actual',
      data: [20000, 40000, 25000, 10000, 12000]
    }
  ],
  chart: {
    type: 'bar',
    height: 350,
    stacked: true
  },
  stroke: {
    width: 1,
    colors: ['#fff']
  },
  dataLabels: {
    formatter: (val) => {
      return val / 1000 + 'K'
    }
  },
  plotOptions: {
    bar: {
      horizontal: true
    }
  },
  xaxis: {
    categories: [
      'Online advertising',
      'Sales Training',
      'Print advertising',
      'Catalogs',
      'Meetings'
    ],
    labels: {
      formatter: (val) => {
        return val / 1000 + 'K'
      }
    }
  },
  fill: {
    opacity: 1,
  },
  colors: ['#80c7fd', '#008FFB', '#80f1cb', '#00E396'],
  legend: {
    position: 'top',
    horizontalAlign: 'left'
  }
};

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