时间戳

首页 > 解决方案 > 如何设置堆叠条的最小高度（顶点图，堆叠条）

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

问题描述

我想在视图中显示一个 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]
  }
];

标签： reactjsapexcharts

解决方案

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

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

}

推荐阅读