如何获得等宽图表 - Apex 图表

Question

我需要制作两个不同的图表。一个简单的条形图，一个在 x 轴上有标签，一个没有标签。该设计要求宽度相等，并且两边都没有填充/边距。因为它需要与其他对象对齐。

一张图表使用了

sparkline: {
 enabled: true
},

选项。由于标签，带有标签的宽度错误。我尝试过使用 css，但使用 magic numbers 并不明智，因为标签的值可以根据值而变化，从而改变宽度。

两者的代码：

https://codepen.io/cibgraphics/pen/JjZaxGB

Image of problem

Answer 1

我想我刚刚找到了一个非常实验性的解决方案来解决这个问题。不是很干净，但是分享很有趣。。。

这个想法是使用第二个svg元素的viewBox属性。它记录在这里：viewBox - SVG: Scalable Vector Graphics | MDN

我也使用SVGGraphicsElement.getBBox() 方法。

SVGGraphicsElement.getBBox() 方法允许我们确定适合对象的最小矩形的坐标。

SVGGraphicsElement.getBBox() - Web APIs | MDN

当页面加载时，我们可以使用SVGGraphicsElement.getBBox()返回的坐标来设置viewBox。它可以工作，但如果您调整窗口大小，则会创建另一个 svg 元素并替换当前元素。因此，viewBox 丢失了。

所以现在的想法是使用 MutationObserver 来监视 DOM 中的变化。在这里，我们观察到 #barChart2，因为我们对其子元素之一（即 svg 元素）感兴趣。当检测到更改时，将调用自定义的noPadding() 函数。

这是代码：

function noPadding() {
  let svg = document.querySelector('#barChart2 svg'),
      {x, y, width, height} = svg.getBBox();

  svg.setAttribute('viewBox', `${x} ${y} ${width} ${height}`);
}

let node = document.querySelector('#barChart2'),
    config = { childList: true },
    observer = new MutationObserver(() => noPadding());

observer.observe(node, config);
noPadding();

如果我把上面的代码放在你所做的事情中，我们会得到这个：

var barChartOptions = {
  series: [{
    name: 'Actual',
    data: [{
        x: '2011',
        y: 12,
      },
    ]
  }],
  chart: {
    type: 'bar',
    height: '22px',
    sparkline: {
      enabled: true
    },
  },
  plotOptions: {
    bar: {
      horizontal: true,
      borderRadius: 10,
      barHeight: '100%',
      colors: {
         backgroundBarColors: ['#E7E7E6'],
         backgroundBarRadius: '11px',
      }
    },
  },
  colors: ['#3CDBC0'],
  tooltip: {
    custom: function({ series, seriesIndex, dataPointIndex, w }) {
      return (
        '<div class="arrow_box">' +
        "<span>" +
        series[seriesIndex][dataPointIndex] +
        "</span>" +
        "</div>"
      );
    }
  }
};

var chart = new ApexCharts(document.querySelector("#barChart1"), barChartOptions);
chart.render();




var barChartOptions2 = {
  series: [{
    name: 'Actual',
    data: [{
        x: '2011',
        y: 10,
      },
    ]
  }],
  chart: {
    type: 'bar',
    height: '90px',
    toolbar: {
      show: false
    },
  },
  grid: {
    show: false,
    padding: {
      right: 0,
      left: 0
    }
  },
  yaxis: {
    show: false,
  },
  xaxis: {
    axisTicks: {
      color: '#000',
    },
  },
  dataLabels: {
   enabled: false,
  },
  plotOptions: {
    bar: {
      horizontal: true,
      borderRadius: 10,
      columnWidth: '100%',
      barHeight: '100%',
      colors: {
         backgroundBarColors: ['#E7E7E6'],
          backgroundBarRadius: '11px',
      },
    },
  },
  colors: ['#3CDBC0'],
  legend: {
    show: false,
  },
  tooltip: {
    custom: function({ series, seriesIndex, dataPointIndex, w }) {
      return (
        '<div class="arrow_box">' +
        "<span>" +
        series[seriesIndex][dataPointIndex] +
        "</span>" +
        "</div>"
      );
    }
  }
};

var chart = new ApexCharts(document.querySelector("#barChart2"), barChartOptions2);
chart.render();

// ==================================================

function noPadding() {
  let svg = document.querySelector('#barChart2 svg'),
      {x, y, width, height} = svg.getBBox();

  svg.setAttribute('viewBox', `${x} ${y} ${width} ${height}`);
}

let node = document.querySelector('#barChart2'),
    config = { childList: true },
    observer = new MutationObserver(() => noPadding());

observer.observe(node, config);
noPadding();

.barChart {
  margin-bottom: 50px;
}

.apexcharts-tooltip {
  filter: drop-shadow(0px 3.15331px 15.778px rgba(0, 45, 93, 0.2));
}

.arrow_box {
  position: relative;
  background: #fff;
}
.arrow_box:after, .arrow_box:before {
  right: 100%;
  top: 50%;
  transform: translate(0, -50%);
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(85, 85, 85, 0);
  border-right-color: #fff;
  border-width: 10px;
  // margin-top: -10px;
  transform: translate(0, -50%);
}
.arrow_box:before {
  border-color: rgba(0, 0, 0, 0);
  border-right-color: #fff;
  border-width: 13px;
  // margin-top: -13px;
  transform: translate(0, -50%);
}

.barChart .apexcharts-tooltip {
  color: #000;
  transform: translateX(10px) translateY(10px);
  overflow: visible !important;
  white-space: normal !important;
}

.barChart .apexcharts-tooltip span {
  padding: 5px 10px;
  display: inline-block;
}

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="barChart1" class="barChart"></div>
<div id="barChart2" class="barChart"></div>