jQWidgets jqxGauge RadialGauge radius 属性

简介

jQWidgets 是一套基于 jQuery 的商业网页 UI 库，其 jqxGauge 组件提供了多种图表展示方式。其中 RadialGauge（径向仪表盘）是一种基于圆形的展示方式，radius（半径）属性用于设置径向仪表盘的半径大小。

属性说明

• 类型：number
• 默认值：100
• 取值范围：正整数
• 作用：设置径向仪表盘的半径大小

代码示例

HTML 代码：

<div id="jqxRadialGauge"></div>

JavaScript 代码：

// 初始化分数仪表盘
$("#jqxRadialGauge").jqxGauge({
    ranges: [
        { startValue: 0, endValue: 60, style: { fill: "#4CB848"} },
        { startValue: 60, endValue: 80, style: { fill: "#FDBD50"} },
        { startValue: 80, endValue: 100, style: { fill: "#E03E3E"} }
    ],
    cap: { size: '5%', style: { fill: '#2E8DEF', stroke: 'black', 'stroke-width': 0 } },
    animationDuration: 1500,
    width: 400,
    height: 400,
    radius: 150,
    value: 85
});

效果展示：

注意事项

• 在设置 radius 属性时应保证高度和宽度足够容纳整个径向仪表盘。
• radius 为正整数时，径向仪表盘的半径为画布宽度和高度的最小值的 radius 倍。如果画布高度小于画布宽度，半径设置可能受到限制。

参考链接

• jQWidgets 官网：https://www.jqwidgets.com/
• jqxGauge 官方文档：https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgauge/jquery-gauge-getting-started.htm