📌  相关文章
📜  jQWidgets jqxGauge LinearGauge easing 属性(1)

📅  最后修改于: 2023-12-03 15:32:17.495000             🧑  作者: Mango

jQWidgets jqxGauge LinearGauge easing 属性介绍

jQWidgets简介

jQWidgets是一组基于jQuery的JavaScript UI组件库，用于创建美观、响应式和功能强大的Web应用程序用户界面。其中包含的组件有jsTree、jqxGrid、jqxChart、jqxDataTable等。

jqxGauge简介

jqxGauge是jQWidgets中的一个画图组件，用于绘制各种形式的仪表盘，包括线性仪表盘、圆形仪表盘、半圆形仪表盘等。它具有丰富的API和简单易操作的方法，可以轻松地完成自定义设置，包括颜色、大小、字体、数据绑定等等。

jqxGauge LinearGauge easing 属性

jqxGauge LinearGauge easing属性用于设置数据更新时的动画效果。easing属性主要有以下几种值：

  • linear：线性动画效果，数据变化时平滑更新。这是默认值。
  • easeInQuad：慢慢加速的动画效果。
  • easeOutQuad：慢慢减速的动画效果。
  • easeInOutQuad：先加速后减速的动画效果。

可以通过以下代码设置easing属性：

$("#linearGauge").jqxLinearGauge({
    easing: 'easeInQuad'
});
示例代码
<div id="linearGauge" style="width: 500px; height: 80px;"></div>
<script>
    //设置数据源
    var data = [30, 50, 70];

    //创建LinearGauge实例
    $("#linearGauge").jqxLinearGauge({
        orientation: 'horizontal',
        ranges: [{
            startValue: 0,
            endValue: 40,
            style: {
                fill: '#FF0000',
                stroke: '#FF0000',
                'stroke-width': 1
            }
        }, {
            startValue: 40,
            endValue: 80,
            style: {
                fill: '#FFA500',
                stroke: '#FFA500',
                'stroke-width': 1
            }
        }, {
            startValue: 80,
            endValue: 100,
            style: {
                fill: '#00FF00',
                stroke: '#00FF00',
                'stroke-width': 1
            }
        }],
        pointer: {
            value: data[0],
            style: {
                fill: '#3366CC'
            },
            size: '5%'
        },
        ticksMinor: {
            interval: 2.5,
            size: '5%',
            style: {
                'stroke-width': 1,
                stroke: '#aaaaaa'
            }
        },
        ticksMajor: {
            interval: 10,
            size: '15%',
            style: {
                'stroke-width': 1,
                stroke: '#aaaaaa'
            }
        },
        max: 100,
        min: 0,
        value: data[0],
        animationDuration: 1000, //设置动画时间
        easing: 'easeInQuad', //设置动画效果
    });

    //定时器更新数据
    setInterval(function() {
        var value = data[Math.floor(Math.random() * data.length)];
        $('#linearGauge').jqxLinearGauge('setValue', value);
    }, 2000);
</script>
效果展示

参考链接