📌  相关文章
📜  jQWidgets jqxGauge LinearGauge ticksPosition 属性(1)

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

jQWidgets jqxGauge LinearGauge ticksPosition 属性介绍

简介

jQWidgets jqxGauge LinearGauge 是一个基于 JavaScript 的仪表插件，可用于创建一个线性刻度表，用于通过指针或其他图形元素表示数值。ticksPosition 属性用于设置线性刻度表上刻度的位置。

语法
$(selector).jqxLinearGauge({ ticksPosition: value });

参数说明：

  • selector: 必需，用于指定要应用线性刻度表的 HTML 元素的选择器字符串。
  • value: 必需，用于指定刻度的位置。可选值为 'near', 'far' 和 'both'。

其中 'near' 表示刻度在中心轴的近侧；'far' 表示刻度在中心轴的远侧；'both' 表示刻度在中心轴的两侧。

示例

以下是一个简单的示例，演示如何使用 ticksPosition 属性设置刻度的位置。在该示例中，我们创建了一个线性刻度表，其中刻度设置为 'near'。

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxGauge LinearGauge ticksPosition 属性示例</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/demos.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxcore.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxdata.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxbuttons.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxscrollbar.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxgauge.js"></script>
</head>
<body>
    <div id="jqxLinearGauge"></div>
    <script>
        $(document).ready(function () {
            $('#jqxLinearGauge').jqxLinearGauge({
                orientation: 'horizontal',
                ticksMajor: { size: '10%', interval: 10 },
                ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa' } },
                max: 100,
                min: 0,
                value: 25,
                pointer: { size: '5%', style: { fill: '#FFAE80' } },
                colorScheme: 'scheme05',
                ranges: [
                    { startValue: 0, endValue: 25, color: '#E0F890' },
                    { startValue: 25, endValue: 50, color: '#FFAE80' },
                    { startValue: 50, endValue: 75, color: '#FFAE80' },
                    { startValue: 75, endValue: 100, color: '#FFAE80' }
                ],
                ticksPosition: 'near'
            });
        });
    </script>
</body>
</html>

效果如下图所示：

jQWidgets jqxGauge LinearGauge ticksPosition 属性示例

总结
  • ticksPosition 属性用于设置线性刻度表上刻度的位置。
  • 可选值为 'near', 'far' 和 'both'。
  • 'near' 表示刻度在中心轴的近侧；'far' 表示刻度在中心轴的远侧；'both' 表示刻度在中心轴的两侧。