apexchart javascript 分组堆叠条有时不起作用

Question

这是场景，我有多个选项卡，其中包含使用 apexcharts javascript 的多个报告。

由于某种原因，我无法让分组堆栈栏像 https://apexcharts.com/javascript-chart-demos/bar-charts/grouped-stacked-bars/ 中的演示一样工作。在演示中，每个类别分为两个。我的只是堆成一行。

我已经尝试过隐身模式，但还是一样，只是在一行中。尝试使用 laravel 的优化清除缓存仍然不起作用。

它一定在我的应用程序中，因为当我将演示中给出的示例粘贴到 codepen 中时，它工作得很好。有什么想法吗？

这是我的html代码

<div class="tab-content mt-4" id="chart-tab-category-content">
    <div class="bg-white tab-pane fade active show" id="effect-rating" role="tabpanel" arialabelledby="effect-rating">
        <div id="effect-rating-test">

        </div>
        <div id="effect-rating-process">

        </div>
    </div>

    <div class="bg-white tab-pane fade" id="rate-distribution-summary" role="tabpanel" arialabelledby="chart-tabs-rating-distribution">
        <div class="mt-4" id="rate-distribution">

        </div>
        <div class="mt-4" id="rating-distribution-process">

        </div>
    </div>
</div>

这是来自 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();

Answer 1

我遇到了同样的问题，升级到最新版本的 Apex Charts（当前为 3.54.1）为我解决了这个问题。