Apexcharts项目栏上的最大宽度

问题描述

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

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

代码：

    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();

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

解决方法

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

有效地，它可以作为最大高度使用，因此，如果有更多数据需要拟合，则条形图将缩小。

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

,

这是我在 VueJS 中实现这种行为的方法。

模板部分

<apexchart :options="barChartOptions" :series="series"></apexchart>

脚本部分

computed() {
    chartOptions() {
        return {
            chart: {
                type: 'bar',height: 100 + this.myData.length() * barWidth,}
        }
    }
}

其中 myData 是包含要绘制的信息的数据数组，而 barWidth 是我想要的每个条形的宽度。 请注意，这实质上是固定每个条形的宽度，然后将图表的高度调整为条形数量的线性函数。