在js中绘制一个可视化显示var数值（-50到+50）的条形图

Question

我正在开发一个项目，其中包含8个变量，每个变量可以达到-50 / + 50，并且它们当前显示为数字，但我希望通过可视化条将其略微调整一下使页面加载适应每个var的当前值。

作为一个粗略的指导方针，并展示我正在寻找的东西，它应该是这样的 -

我尝试使用noUIslider来处理它，但它没有按预期工作（用户不应该能够滑动滑块而我无法设置值基于我的变量）。

所以我的问题是，是否有一个库/ codepen / jsfiddle在那里已经这样做了？如果没有，那么构建这样的东西最好的方法是什么？