博客

jQWidgets jqxBulletChart refresh() 方法

  • Post category:jquery

jqxBulletChart 是 jQWidgets 提供的一种图表控件，用于显示目标值、实际值和表现值之间的关系。refresh() 方法用于刷新 jqxBulletChart 控件。以下是 jqxBulletChart 的 refresh() 方法的详细说明：

refresh() 方法

refresh() 方法用于刷新 jqxBulletChart 控件。当 jqxBulletChart 控件的属性或数据发生变化时，可以使用 refresh() 方法来更新控件。

语法

// 刷新 jqxBulletChart 控件
$("#jqxBulletChart").jqxBulletChart("refresh");

示例

以下是两个示例，演示如何使用 refresh() 方法刷新 jqxBulletChart 控件。

示例 1

在此示例中，我们创建了一个 jqxBulletChart 控件，并将其指针值更改为 70。然后，我们使用 refresh() 方法刷新控件，以便更新指针值。

<div id="jqxBulletChart"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxBulletChart 控件
        $("#jqxBulletChart").jqxBulletChart({
            width: 500,
            height: 50,
            ranges: [
                { startValue: 0, endValue: 20, color: "#FF0000" },
                { startValue: 20, endValue: 80, color: "#FFFF00" },
                { startValue: 80, endValue: 100, color: "#00FF00" }
            ],
            pointer: { value: 50, label: "Actual" },
            target: { value: 80, label: "Target" }
        });

        // 更改指针值
        $("#jqxBulletChart").jqxBulletChart({ pointer: { value: 70, label: "Actual" } });

        // 刷新 jqxBulletChart 控件
        $("#jqxBulletChart").jqxBulletChart("refresh");
    });
</script>

示例 2

在此示例中，我们创建了一个 jqxBulletChart 控件，并将其目标值更改为 90。然后，我们使用 refresh() 方法刷新控件，以便更新目标值。

<div id="jqxBulletChart"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxBulletChart 控件
        $("#jqxBulletChart").jqxBulletChart({
            width: 500,
            height: 50,
            ranges: [
                { startValue: 0, endValue: 20, color: "#FF0000" },
                { startValue: 20, endValue: 80, color: "#FFFF00" },
                { startValue: 80, endValue: 100, color: "#00FF00" }
            ],
            pointer: { value: 50, label: "Actual" },
            target: { value: 80, label: "Target" }
        });

        // 更改目标值
        $("#jqxBulletChart").jqxBulletChart({ target: { value: 90, label: "Target" } });

        // 刷新 jqxBulletChart 控件
        $("#jqxBulletChart").jqxBulletChart("refresh");
    });
</script>

以上是 jqxBulletChart 的 refresh() 方法的详细说明，以及两个示例说明。

Tags: