Установите минимальную высоту или ширину для столбца диаграммы Apexcharts

Если данных намного меньше, чем у других, они почти равны нулю, и пользователь не может щелкнуть, потому что они слишком малы.

Как установить минимальную высоту или ширину для небольших чисел?

Gif

введите здесь описание изображения


person Fakhamatia    schedule 15.05.2020    source источник


Ответы (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);
}

Код работает плохо, но это лучше, чем ничего.

введите описание изображения здесь

введите описание изображения здесь

person Fakhamatia    schedule 06.12.2020