Как я могу сделать перемещение по центру с накоплением диаграммы?

Question

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

Я искал диаграмму 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}%`;
}