博客

jQWidgets jqxBulletChart高度属性

  • Post category:jquery

jqxBulletChart 是 jQWidgets 提供的一种图表控件，用于显示目标值、实际值和表现值之间的关系。height 属性用于设置 jqxBulletChart 控件的高度。以下是 jqxBulletChart 的 height 属性的详细说明：

height 属性

height 属性用于设置 jqxBulletChart 控件的高度。可以使用像素或百分比来设置高度。默认情况下，jqxBulletChart 控件的高度为 150 像素。

语法

// 获取 height 属性值
var height = $("#jqxBulletChart").jqxBulletChart("height");

// 设置 height 属性值
$("#jqxBulletChart").jqxBulletChart({ height: 200 });

示例

以下是两个示例，演示如何使用 height 属性设置 jqxBulletChart 控件的高度。

示例 1

在此示例中，我们创建了一个 jqxBulletChart 控件，并将其高度设置为 100 像素。

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

<script>
    $(document).ready(function () {
        // 创建 jqxBulletChart 控件
        $("#jqxBulletChart").jqxBulletChart({
            width: 500,
            height: 100,
            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" }
        });
    });
</script>

示例 2

在此示例中，我们创建了一个 jqxBulletChart 控件，并将其高度设置为 50%。

<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" }
        });
    });
</script>

以上是 jqxBulletChart 的 height 属性的详细说明，以及两个示例说明。

Tags: