jQWidgets jqxBulletChart 更改事件(1)

📌 相关文章

📜 jQWidgets jqxBulletChart 更改事件(1)

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

jQWidgets jqxBulletChart 更改事件介绍

jQWidgets jqxBulletChart 是一个美观的线性进度条控件，它可以显示一个目标值、进度值以及多个比较值。本文将介绍 jqxBulletChart 的更改事件。

更改事件

jqxBulletChart 提供了两个更改事件。分别为 valueChanged 和 targetValueChanged。当 jqxBulletChart 的值（value）或者目标值（targetValue）发生变化时，这两个事件都会被触发。

$('#bulletChart').on('valueChanged', function (event) {
  console.log('value has been changed');
});

$('#bulletChart').on('targetValueChanged', function (event) {
  console.log('targetValue has been changed');
});

更改事件回调函数参数

当触发了 jqxBulletChart 的更改事件后，事件回调函数中可获得一个对象参数 event。event 对象包含了下面三个属性。

type: 事件的类型，值为字符串 valueChanged 或 targetValueChanged。
value: 当前 jqxBulletChart 的值。
targetValue: 当前 jqxBulletChart 的目标值。

$('#bulletChart').on('valueChanged', function (event) {
  console.log(`valueChanged: value=${event.value}, targetValue=${event.targetValue}`);
});

$('#bulletChart').on('targetValueChanged', function (event) {
  console.log(`targetValueChanged: value=${event.value}, targetValue=${event.targetValue}`);
});

实例

下面是一个简单的实例，演示了如何使用 jqxBulletChart，以及如何处理 jqxBulletChart 的更改事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jqxBulletChart example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
  <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxcore.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxbulletchart.js"></script>
</head>
<body>
<div id="bulletChart" style="width: 200px; height: 50px;"></div>

<script>
  $(document).ready(function () {
    // 初始化 jqxBulletChart
    $('#bulletChart').jqxBulletChart({
      width: 200,
      height: 50,
      value: 35,
      targetValue: 60
    });

    // 监听 jqxBulletChart 更改事件
    $('#bulletChart').on('valueChanged', function (event) {
      console.log(`valueChanged: value=${event.value}, targetValue=${event.targetValue}`);
    });

    $('#bulletChart').on('targetValueChanged', function (event) {
      console.log(`targetValueChanged: value=${event.value}, targetValue=${event.targetValue}`);
    });
  });
</script>
</body>
</html>

在上述实例中，我们初始化了一个 200×50 大小的 jqxBulletChart，它的值为 35，目标值为 60。同时，我们还监听了 jqxBulletChart 的更改事件，并在控制台输出了事件回调函数参数。开发者可以在浏览器中打开上述 HTML 文件，查看控制台输出结果，以更深入地了解 jqxBulletChart 的更改事件。