Question

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

Answer 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

}

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

1 个答案: