Multi-purpose Radial Bars With jQuery And SVG - ratePoint

版本:

浏览量:1168

最后更新：2021-09-10

应用标签：Jquery插件 MAC 软件 git

推荐指数:

查看演示点击下载

详细信息

ratePoint 是一个 jQuery 插件，它利用 JavaScript 和 SVG 生成动画和可自定义的圆圈，用于表示百分比值和任意数字。

也可以看看：

JavaScript 和 CSS 中的 10 个最佳进度条（线性）组件
10 个最佳圆形/径向进度条 JavaScript 插件
Vue.js 应用程序的 10 个最佳进度条组件
10 个最好的 JavaScript 和 CSS 进度条组件

如何使用它：

1. 在文档中插入 jQuery 库和 ratePoint.js 插件。

<link rel="stylesheet" href="/path/to/css/radial-themes.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/ratePoint.js"></script>

2. 初始化插件。

autoRatePoint();

3. 为径向条创建一个 SVG 元素并通过以下数据属性配置插件：

数据功能：必需
数据开始：起始值
数据结束：结束值
数据标记：自定义标记
数据单位：自定义单位
数据时间：动画的持续时间
数据标签：自定义标签
数据角度：起始角度
data-split：拆分布局
数据镜像： “x”、“y”、“x,y”或“y,x”
data-bkpoints：断点
data-bkclass：对应的CSS类
data-bkcolors：对应的颜色
数据运行：页面加载时自动运行

<svg id="animated" class='' data-toggle="class" viewbox="0 0 100 100 " xmlns="http://www.w3.org/2000/svg ">
  <circle class='no-fil' cx="50 " cy="50 " r="45 "/>
  <item data-func="prodata"
        data-start="0 "
        data-end="75 "
        data-mark="100 "
        data-unit='%'
        data-time="7000 "
        data-label="<span class='<a href="https://www.jqueryscript.net/tags.php?/grid/">grid</a>-center font8 font-all'>AutoMeter</span>"
        data-angle="0"
        data-mirror="x"
        data-bkpoints="0 20 50 70 100" 
        data-bkclass="low normal medium high complete"
        data-run="auto">
      </item>
  <path id="1" class="bar6 cap-round" data-func="progressbar" stroke-linecap="round" stroke-dasharray="0,251.36264038085938" stroke-width="1" d="M50 10 a 30 30 0 0 1 0 80 a 30 30 0 0 1 0 -80">
  </path>
  <foreignObject data-func="protext" x="20" y="20" height="60%" width="60%" text-anchor="middle" dy="7" class="text-center"></foreignObject>
</svg>

4. 这个例子展示了如何自动更新径向条。

let datas = [10, 50, 30, 70, 45, 10];
    i = 0;
    instance = 0;
    elem = "#1"
    setInterval(function() {
        let path = $(elem).find("path"),
            prodata = $(elem).find("[data-func='prodata']");
        //dataStart = (dataStart / dataMark) * 100;
        dataStart = path.attr('data-point') ? $(elem).find("path").attr('data-point') : 0;
        dataMark = prodata.attr('data-mark');
        dataStop = datas[i];
        prodata.attr({
            "data-start": dataStart,
            "data-end": dataStop
        });
        console.log(dataStart)
        setTimeout(function() {
            autoRatePoint("#1")
        }, 200);
        if (i == datas.length) {
            i = 0;
            instance = 0;
        }
        i++;
        instance = 1;
}, 10000)

联系我们

免费复制

微信扫码关注领取验证码

注:需在公众号回复"验证码