jQWidgets jqxGauge LinearGauge valueChanging 事件(1)

📌 相关文章

📜 jQWidgets jqxGauge LinearGauge valueChanging 事件(1)

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

jQWidgets jqxGauge LinearGauge valueChanging 事件

简介

jQWidgets jqxGauge 是一款基于 jQuery 和 HTML5 技术实现的仪表盘插件。jqxGauge 组件提供多种类型的图表样式，其中 LinearGauge 是一种可定制的线性仪表盘。

valueChanging 事件是在 LinearGauge 的值改变时触发的。该事件提供了当前值和新值两个参数，开发者可以利用这两个参数来实现对 LinearGauge 的自定义控制。

使用方法

在使用 jqxGauge LinearGauge 的过程中，需要引入以下文件：

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.metro.css" type="text/css" />
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

接下来创建一个 LinearGauge 控件，以及一个 valueChanging 事件监听器：

$("#linearGauge").jqxLinearGauge({
    orientation: "horizontal",
    labels: {
        formatFunction: function(value) {
            return value.toString() + "%";
        }
    },
    ranges: [
        { startValue: 0, endValue: 20, style: { fill: '#4cb848', stroke: '#4cb848' }, startDistance: 0, endDistance: 0 },
        { startValue: 20, endValue: 40, style: { fill: '#fad00b', stroke: '#fad00b' }, startDistance: 0, endDistance: 0 },
        { startValue: 40, endValue: 60, style: { fill: '#fa8616', stroke: '#fa8616' }, startDistance: 0, endDistance: 0 },
        { startValue: 60, endValue: 80, style: { fill: '#e02020', stroke: '#e02020' }, startDistance: 0, endDistance: 0 },
        { startValue: 80, endValue: 100, style: { fill: '#b41515', stroke: '#b41515' }, startDistance: 0, endDistance: 0 }
    ],
    ticksMinor: { size: '5%', interval: 2.5 },
    ticksMajor: { size: '10%', interval: 10 },
    pointer: { size: '6%' },
    animationDuration: 1500,
    showRanges: true,
    value: 50
});

$("#linearGauge").on("valueChanging", function (event) {
    // 根据当前值和新值执行自定义操作
    console.log("Current value: ", event.args.oldValue);
    console.log("New value: ", event.args.value);
});

当 LinearGauge 的值改变时，valueChanging 事件会触发，自定义操作可以在监听器中实现。

参数说明

事件参数 event 包含以下两个子参数：

args.oldValue: 当前 LinearGauge 的值。
args.value: 变更后的 LinearGauge 的值。

总结

在使用 jQWidgets jqxGauge LinearGauge 时，valueChanging 事件可以帮助开发者自定义 LinearGauge 控件的行为。监听器中可以根据事件参数执行自定义操作。

代码片段：