请问这种动态效果怎么做呢？有什么插件可以用吗？还要做成响应式

Question

不知道为什么有人会踩我？
如果是写死的数据。谁不会啊？
我问的是数据不确定的情况。不喜勿喷
下面的进度条是动态的。每条数据都不同啊。所以怎么显示宽度呢？还要跟别的行进行对比。还要做成响应式有什么插件可以用吗？

如图：

Answer 1

我点了踩。

你没有明确描述遇到的问题或 bug。这是一个问答平台，不是白嫖方案的平台。不要描述「我要什么」，应该描述「什么困扰了我」。你这问题和「如何吃饭」一样，我知道，但我没有义务教你。

楼上也是闲，能跟你对线对这么久，还问出来「通过比例设置其百分比宽度」。

Answer 2

楼上大佬们字都好多呀。

我来说说方案吧。看了看题目和图，提取了几个关键词 动态、排序、百分比。

假设数据结构为

list = [
    {title: '正常1', value: 100},
    {title: '正常2', value: 102},
    {title: '正常3', value: 101}
]

那我们开始对数据做操作，排序很简单 sort 就可以完成的很好 list.sort((n,m)=>n.value-m.value) 这样就完成了排序。

接下来就是百分比，其实就是获取一下最大值，然后 value/max * 100 + '%' ，max = Math.max(...list.map(v=>v.value))

list = []
// 就问你够随机嘛？
for(var i = 0, l = 5+Math.random() * 20; i < l ; i++){
    list.push({'title': Math.random(), value: Math.random() * 400 >> 0})
}
console.log(JSON.parse(JSON.stringify(list)))

// 随机数据，然后排序一把。
list.sort((n,m)=>m.value-n.value)
console.log(JSON.parse(JSON.stringify(list)))

// 我都排序了，我还不能用第一个？
maxValue = list[0].value

list.forEach(v=>{
    v.rate = v.value / maxValue * 100 + '%'
})
console.log(JSON.parse(JSON.stringify(list)))

---

测试地址，一会增加一个可以动态补数据的
http://www.lilnong.top/static/html/sf-q-1010000038765159-list-sort-max-rate.html

---

下面这个是可以动态增加数据的。
http://www.lilnong.top/static/html/sf-q-1010000038765159-list-sort-max-rate-async.html

Answer 3

动态效果是什么？从左到右增长到终点？tansition配合width即可

Answer 4

一开始不是很明白你困惑的点在哪，或许可以把需要帮助的点写的醒目一些。

动态指的是数据变化时始终要降序排列？感觉实现起来不会有什么障碍啊。

然后宽度的问题ls说得很清楚了。我看你数据最大的那行是要占满的，那比如你这个表宽度是 w，你最大的数据是 a_max，那么简单考虑一下，如果有一个数据的大小他是 a_max/2 显然它那个条子的宽度也该是最大宽度的一半 w/2，这样一来任意数据 a_i 的宽度就该是 w * (a_i/a_max)，JS 实现起来应该不难。
当然还得留点宽度给条右边的数字。

我感觉，lz态度也可以啦，就是计算显示宽度这个需求没说清楚，不至于点个踩吧。
反观某些人口上说着这是问答平台，却用本该是回答的位置来进行说教，不太合适吧。
我们是没有义务教lz，但lz问了并没有强迫你答。而且事实证明有我这样的用户愿意解答lz的问题。

我打字比较慢，回答已经写了五分钟了，因此评论区如果有人要对线的话就恕不奉陪。