设置列 Apexcharts 图表的最小高度或宽度

Question

如果数据比别人低很多，几乎为零，用户点击不了，因为太小了。

如何为小数字设置最小高度或宽度？

Answer 1

图表渲染结束时使用此函数

function svgBalancer(minHeight, absUnit, bool) {
  let cols = document.getElementsByClassName("apexcharts-bar-area");
  let labels = document.getElementsByClassName("apexcharts-datalabel");
  for (let i = 0; i < cols.length; i++) {
    if (parseFloat(cols[i].getAttribute("barHeight")) <= minHeight && parseFloat(cols[i].getAttribute("barHeight")) != 0) {
      let d = cols[i].getAttribute("d");
      d = d.split(" ");
      if (bool == false) {
        let d2 = d[2].split(".");
        d2[0] = absUnit;
        d[2] = d2.join(".");
        let d3 = d[3].split(".");
        d3[0] = absUnit;
        d[3] = d3.join(".");
      } else {
        let d4 = d[4].split(".");
        d4[0] = absUnit;
        d[4] = d4.join(".");
        let d6 = d[6].split(".");
        d6[0] = absUnit;
        d[6] = d6.join(".");
      }
      cols[i].setAttribute("d", d.join(" "));
      let yLabel = parseFloat(labels[i].getAttribute("y"));
      let delta = yLabel - absUnit;
      yLabel = yLabel - delta - 8;
      labels[i].setAttribute("y", yLabel);
    }
  }
}

updated: function(chartContext, config) {
    svgBalancer(8, 313, true);
},
animationEnd: function(chartContext, options) {
    svgBalancer(8, 313, false);
}

代码效果不佳，但聊胜于无。

设置列 Apexcharts 图表的最小高度或宽度

Set minimum height or width for column Apexcharts chart

charts

apexcharts