如何设置堆叠条的最小高度（顶点图，堆叠条）答案

【问题标题】：How to set minimum height for stacked bar (apexcharts, stackedbar)如何设置堆叠条的最小高度（顶点图，堆叠条）
【发布时间】：2019-08-15 13:39:39
【问题描述】：

我想在视图中显示一个 ReactApexChart 表，并且我想以一种适合视图的方式设置它。它应该显示特定主题的答案的统计数据，因此总是只有一行图表带有正面和负面答案。

但是，我无法使其适合小于 100 像素，对于我没有标题的需求，即使 30 像素也很可能就足够了。

我看到图表上应用了变换，这可能是原因吗？如何让它发挥作用？

示例如下：

  {/* <ReactApexChart
      options={this.chartOptions}
      series={this.chartSeries}
      type="bar"
      height="100px"
    /> */}

这是我的选择和系列

private chartOptions = {
  stroke: {
    width: 0
  },
  tooltip: {
    show: false
  },
  chart: {
    width: "100%",
    stacked: true,
    stackType: "100%",
    toolbar: {
      show: false
    }
  },
  grid: {
    show: false
  },
  plotOptions: {
    bar: {
      horizontal: true
    }
  },
  xaxis: {
    categories: [""],
    labels: {
      show: false
    },
    axisBorder: {
      show: false
    },
    crosshairs: {
      show: false
    }
  },
  yaxis: {
    axisBorder: {
      show: false
    },
    crosshairs: {
      show: false
    }
  },
  legend: {
    show: false
  },
  fill: {
    opacity: 1
  }
};
private chartSeries = [
  {
    name: "Empty",
    data: [44]
  },
  {
    name: "Success",
    data: [5]
  },
  {
    name: "Error",
    data: [1]
  }
];

【问题讨论】：

是不是因为div的风格？ div 的宽度为 100%，宽度为 100px，高度为 100px 有效吗？
不，不幸的是它没有。我试过了，但没有用。后来我也发现了一个评论，最好不要触摸高度设置。

标签： reactjs apexcharts

【解决方案1】：

你能写一个函数来设置那个图表的高度吗？所以在我的一个图表中，我必须修复大小，以便页面不显示任何滚动。我的图表选项就像

chart: {
            height: yourFunctionForHeight(), //return only number 
            type: 'bar',
            stacked: true,
            toolbar: {
            show: true
            }
       }
function yourHeightFunction() {
     //logic that calculates height
     return number; //without attaching px to it

}

【讨论】：