时间戳

首页 > 解决方案 > 如何制作中心移动堆叠图？

javascript - 如何制作中心移动堆叠图？

问题描述

我正在尝试制作一个 100% 的堆叠条，其中心点根据从某些数据中获得的比率动态地向左或向右移动。 看起来像这样。。

我搜索了 chart.js 或类似的，但他们的堆叠图表从一开始就调整大小，而不是中心。我怎样才能用 JavaScript 制作它，或者你能给我任何关键字来搜索吗？

标签： javascriptdynamiccharts

解决方案

我用 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}%`;
}

推荐阅读