Apexcharts 项目栏上的最大宽度

Question

如何更改 Apexcharts 中项目栏的最大宽度/高度？（https://apexcharts.com/）

我有一个水平条形图，其数据是动态加载的，并且用户（项目）的数量各不相同。当用户很少或只有一个时，栏看起来非常大，我想将高度设置为最大 50px。

代码：

    var timeChart = {
            formatter: function (value) {
              var v = formatFromSeconds(value);
              return v;
            }
          };    
    var desv_time = function (value) {
      var v = formatFromSeconds(value);
      if (value>0)return "+"+v;
      else return v;
    }

    //CHART
    var chart1 = new ApexCharts( document.querySelector("#chart-desv"),
    {
      chart: {
          id: 'chart1',
          type: 'bar'
      },
      plotOptions: {
          bar: {
            horizontal: true,
          },
      },
      dataLabels: {
        enabled: true,
        formatter: desv_time,
        style: {
          colors: ["#000"]
        }
      },
      series: [],
      xaxis: {labels: {
        formatter: desv_time,
      }},
      tooltip: {
        followCursor: true,
        x: {
          formatter: function(value) {
            return value;
          },
        },
        y: {
            formatter: desv_time,
            title: {formatter: (seriesName) => 'Time difference',}
        },
        marker: {show:false}
      },
      title: { text: "Usual workday duration: 08:00", align: "center" }
    });
    chart1.render();

屏幕截图（一个用户的非常大的条）：

Answer 1

我正在使用类似于@Oscar Schafer 的方法

我发现，对于我的情况，宽度可以基于我的系列的长度。

场地为：

• 当我们有很少的项目时，例如 1 或 2，图表宽度将仅由这些列填充。然后，如果我的项目很少，columnWidth 应该按比例变小（在我的例子中接近 20%）

• 当我们有更多项目时，它们都会共享图表宽度并更平滑地填充它。然后，如果我有很多项目，该列应该按比例变大（接近 80%）

我使用逻辑增长模型作为函数来计算条形宽度

下面是计算列宽的代码：

// f(x) = c / (1 + a*exp(-x*b)) -> LOGISTIC GROWTH MODEL
var optimalColumnWidthPercent = 20 + (60 / (1 + 30*Math.exp(-seriesLength /3)));

// 20: minimum width should be close to 20 (when only one item)
// 20+60: maximum width should be close 80
// 30 and 3: the a and b from the function, I've selected after testing some cenarios from seriesLength from 1 to 12 and finding which worked for me

...

plotOptions: {
  bar: {
    columnWidth: optimalColumnWidthPercent + "%"
  },
},

Answer 2

对于水平条形图，您可以使用该barHeight属性来设置条形的高度。不幸的是，它不能设置为像素值，而是“网格矩形中可用高度的百分比”（来自文档）。

实际上，它作为最大高度起作用，因此如果需要容纳更多数据，条形图将会缩小。

plotOptions: {
      bar: {
          barHeight: '70%'
      }
}