📌  相关文章
📜  jQWidgets jqxBarGauge endAngle 属性(1)

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

使用 jQWidgets jqxBarGauge 的 endAngle 属性

简介

jQWidgets 是一个专为开发者提供高效易用的基于 jQuery 和 Angular 的前端框架。jqxBarGauge 是 jQWidgets 中的一个插件，用于在网页中显示一个类似指针表盘的仪表测量工具，并且可以通过 endAngle 属性设置结束角度。

语法
$('#jqxBarGauge').jqxBarGauge({
    endAngle: 180
});
参数说明
  • endAngle：设置仪表的结束角度。默认值为 270，即逆时针旋转 270 度为最大值。
示例

下面的示例演示了如何使用 endAngle 属性设置仪表的结束角度。

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxBarGauge endAngle 示例</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.11.1.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/jqxdraw.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxgauge.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxbargauge.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxBarGauge').jqxBarGauge({
                value: 70,
                max: 100,
                endAngle: 180,
                ranges: [{
                    startValue: 0,
                    endValue: 30,
                    style: {fill: '#4cb848', stroke: '#4cb848'}
                }, {
                    startValue: 30,
                    endValue: 70,
                    style: {fill: '#fad00b', stroke: '#fad00b'}
                }, {
                    startValue: 70,
                    endValue: 100,
                    style: {fill: '#ff4800', stroke: '#ff4800'}
                }]
            });
        });
    </script>
</head>
<body>
    <div id="jqxBarGauge" style="width: 300px; height: 150px;"></div>
</body>
</html>

效果图如下：

endAngle 示例效果图

总结

通过设置 endAngle 属性，可以方便地调整仪表的结束角度，使得仪表控件适应更多的需求场景。