jQWidgets jqxBarGauge val() 方法(1)

📌 相关文章

📜 jQWidgets jqxBarGauge val() 方法(1)

📅 最后修改于: 2023-12-03 14:43:20.095000 🧑 作者: Mango

jQWidgets jqxBarGauge `val()` 方法

jqxBarGauge 是 jQWidgets 中的一个图表组件，用于创建水平或垂直的条形计量表。val() 方法是 jqxBarGauge 对象中的一个方法，用于获取或设置条形计量表中的值。

方法使用

以下是 jqxBarGauge 对象中 val() 方法的使用方法：

// 获取条形计量表当前值
var value = $("#myBarGauge").jqxBarGauge("val");

// 设置条形计量表的值
$("#myBarGauge").jqxBarGauge("val", 50);

参数说明

val() 方法有两个参数：

value：可选，设置条形计量表的值。
animationDuration：可选，设置值更改时的动画时间（以毫秒为单位）。

返回值

val() 方法有一个返回值，即当前条形计量表的值。

示例代码

以下是一个设置和获取 jqxBarGauge 值的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Bar Gauge Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
  <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
  <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
</head>
<body>

<h2>Bar Gauge Demo</h2>
<div id="myBarGauge" style="width:200px; height:350px"></div>

<script>
  $(document).ready(function(){
    // 创建条形计量表
    $("#myBarGauge").jqxBarGauge({
        width: 200,
        height: 350,
        max: 100,
        value: 25,
        animationDuration: 1500,
        colorScheme: "energyblue",
        relativeInnerRadius: 0.4,
        tooltip: {
          showDelay: 0,
          hideDelay: 0,
          autoHide: true,
          formatFunction: function (value) {
            return "Current Value: " + value;
          }
        },
        bar: {
          stroke: "gray",
          lineWidth: 1,
          offset: {
            x: 0,
            y: -10
          }
        }
    });

    // 获取当前值
    var currentValue = $("#myBarGauge").jqxBarGauge("val");
    alert("Current Value: " + currentValue);

    // 设置值为 50
    $("#myBarGauge").jqxBarGauge("val", 50);
  });
</script>

</body>
</html>

在此示例中，我们创建了一个具有水平方向的条形计量表，并设置了最大值和当前值。我们还定义了颜色方案、相对内半径和工具提示格式函数。在 JavaScript 代码中，我们使用 $("#myBarGauge").jqxBarGauge("val") 获取当前值，然后使用 $("#myBarGauge").jqxBarGauge("val", 50) 将值设置为 50。