Multibar.js是一个简单但完全可定制的jQuery插件，用于创建多色（分段）进度条，以表示各种数据范围、完成级别或任何其他需要可视化的指标

它支持一个或多个标记，这些标记清楚地指示进度条中的特定点或里程碑。此外，该插件允许您根据进度值生成图例，使用户能够轻松解释所呈现的数据。

参见：

• JavaScript和CSS中的10个最佳进度条（线性）组件

如何使用它:

1.将jQuery库和Multibar.js插件的文件添加到页面中。

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
 
<!-- jQuery Multibar.js -->
<link rel="stylesheet" href="multibar.css">
<script src="multibar.js"></script>

2.为进度条创建一个空的DIV。

<div id="example"></div>

3.初始化插件并在进度条中添加一个标记。

var bar = $('#example').multibar({
    initValue: [3],
});
 
// OR
bar.multibar("setValue",[3]);

4.自定义标记。

var bar = $('#example').multibar({
 
    // or "inside"
    posMarker: "outside",
 
    // custom icon class
    iconMarker: "arrow-down",
    
});

5.设置最小/最大值。

var bar = $('#example').multibar({
    min: 0,
    max: 10,
});

6.自定义进度条每个部分的样式。

var bar = $('#example').multibar({
 
    multiBarValue:[
    {
      visibility:"visible",
      val:2,
      bgColor:"green"
    },
    {
      visibility:"visible",
      val:4,
      bgColor:"yellow"
    },
    {
      visibility:"visible",
      val:6,
      bgColor:"orange"
    },
    {
      visibility:"visible",
      val:8,
      bgColor:"red"
    },
    {
      visibility:"visible",
      val:10,
      bgColor:"purple"
    }
  ],
 
});

7.自定义图例。

var bar = $('#example').multibar({
 
    legend:{
      show: true,
      title: "My Item",
      titleClass: "titleLegend",
      itemClass: "itemLegend"
    }
 
});

8.更多插件选项。

var bar = $('#example').multibar({
 
    // 'hot', 'cold'
    type: "normal",
 
    // enable Multi Bar Thermometer
    thermometer: false,
 
    // reverse the progress bar
    reverse: false,
 
    // set the visibility of values
    multiBarValueVisibility: "visible",
 
    // set the position of the box-shadow
    // e.g. 'top_right'
    shadow: false
 
});

预览截图

多色进度条插件 jQuery Multibar.js