Multi-purpose Radial Bars With jQuery And SVG - ratePoint

Multi-purpose Radial Bars With jQuery And SVG - ratePoint

版本:

浏览量:89

最后更新:2021-09-10

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

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)

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。