我可以绘制一个显示分布和截止值的水平条形图吗？

<div id="chart"></div>

#chart {
  width: 500px;
  height: 50px;
  background-color: #f2f2f2;
}

.bar {
  height: 100%;
  background-color: #007bff;
}

// 假设您有一个数据数组，包含了每个类别或数据的比例值
var data = [0.2, 0.5, 0.8];

// 获取chart元素
var chart = document.getElementById("chart");

// 遍历数据数组，为每个数据创建一个水平条形图
for (var i = 0; i < data.length; i++) {
  // 创建一个div元素作为水平条形图
  var bar = document.createElement("div");
  bar.className = "bar";
  
  // 设置水平条形图的宽度为对应的比例值
  bar.style.width = (data[i] * 100) + "%";
  
  // 将水平条形图添加到chart元素中
  chart.appendChild(bar);
}