如何制作中心移动堆积图？

Question

我正在尝试制作一个100％堆积的条，以使中心点根据从某些数据中获得的比率动态地向左或向右移动。 looks like that..

我搜索了chart.js或类似文件，但是它们的堆积图从一开始就调整了大小，而不是居中。 如何使用JavaScript进行编码，或者您可以给我任何要搜索的关键字？

Answer 1

我使用CSS和javascript做到了这一点。看看这个codepen。该函数当前采用比率。 0.3等于30％，依此类推。您只需要传递1，第二个小节可以通过余数计算，因此剩余70％。现在，我已经将.3硬编码到了按钮onClick调用中，但是您基本上会在数据提取完成后调用它，然后传递数据。

以下是函数：

updateWidth = (ratio) => {
  const bar1 = document.getElementById('bar1');
  const bar2 = document.getElementById('bar2');
  bar1.style.width = `${ratio * 100}%`;
  bar2.style.width = `${(1 - ratio) * 100}%`;
}