jQWidgets jqxGauge 完整参考

jQWidgets jqxGauge 是一个 javascript 组件，它提供了各种样式和功能的仪表盘，可用于可视化数据和信息。它具有高度可定制性和可扩展性，可以轻松地与其他 jQWidgets 组件集成。

安装

安装 jQWidgets jqxGauge 的方法有很多种，以下是常见的两种方法：

1. CDN：使用 jQWidgets 官方提供的 CDN 加载 jQWidgets jqxGauge 资源，这是最简单的方式。

<!-- 引入 jqxgauge 组件的 CSS 和 JavaScript -->
<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/jqxcore.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxgauge.js"></script>

2. 下载：从官网 下载 jQWidgets jqxGauge，然后将下载的文件解压到项目目录中，并引用相关文件。

<!-- 引入 jqxgauge 组件的 CSS 和 JavaScript -->
<link rel="stylesheet" href="/path/to/jqx.base.css" type="text/css" />
<script type="text/javascript" src="/path/to/jqxcore.js"></script>
<script type="text/javascript" src="/path/to/jqxgauge.js"></script>

使用

以下示例中，我们创建一个简单的 jQWidgets jqxGauge，并设置一些选项。

<!-- HTML 代码 -->
<div id="jqxgauge"></div>

// JavaScript 代码
$(function() {
  // 创建 jqxGauge 实例
  $('#jqxgauge').jqxGauge({
    // 配置选项
    ranges: [
      { startValue: 0, endValue: 30, style: { fill: '#4cb848', stroke: '#4cb848' }, startDistance: 0, endDistance: 0 },
      { startValue: 30, endValue: 70, style: { fill: '#fad00b', stroke: '#fad00b' }, startDistance: 0, endDistance: 0 },
      { startValue: 70, endValue: 100, style: { fill: '#f03e3e', stroke: '#f03e3e' }, startDistance: 0, endDistance: 0 }
    ],
    ticksMinor: {
      interval: 5,
      size: '5%',
      style: { stroke: '#333', 'stroke-width': 1 }
    },
    ticksMajor: {
      size: '10%',
      interval: 10,
      style: { stroke: '#333', 'stroke-width': 2 }
    },
    labels: {
      position: 'outside',
      interval: 10
    },
    pointer: {
      length: '80%',
      width: 10
    },
    animationDuration: 1500,
    value: 42
  });
});

配置选项

以下是 jQWidgets jqxGauge 的常用选项。可在创建 jqxGauge 实例时作为参数传递。

[attribute] ranges

• Type: Array
• Description: 指定仪表盘的刻度范围。每个元素代表一个范围，包括起始值 startValue、结束值 endValue、样式 style，以及起始距离 startDistance 和结束距离 endDistance。

ranges: [
  { startValue: 0, endValue: 30, style: { fill: '#4cb848', stroke: '#4cb848' }, startDistance: 0, endDistance: 0 },
  { startValue: 30, endValue: 70, style: { fill: '#fad00b', stroke: '#fad00b' }, startDistance: 0, endDistance: 0 },
  { startValue: 70, endValue: 100, style: { fill: '#f03e3e', stroke: '#f03e3e' }, startDistance: 0, endDistance: 0 }
]

[attribute] ticksMinor

• Type: Object
• Description: 指定小刻度线的样式和间隔。

ticksMinor: {
  interval: 5,
  size: '5%',
  style: { stroke: '#333', 'stroke-width': 1 }
}

[attribute] ticksMajor

• Type: Object
• Description: 指定大刻度线的样式和间隔。

ticksMajor: {
  size: '10%',
  interval: 10,
  style: { stroke: '#333', 'stroke-width': 2 }
}

[attribute] labels

• Type: Object
• Description: 指定标签的位置和间隔。

labels: {
  position: 'outside',
  interval: 10
}

[attribute] pointer

• Type: Object
• Description: 指定指针的长度和宽度。

pointer: {
  length: '80%',
  width: 10
}

[attribute] animationDuration

• Type: Number
• Description: 指定动画持续时间，单位为毫秒。

animationDuration: 1500

[attribute] value

• Type: Number
• Description: 指定仪表盘的当前值。

value: 42

方法

以下是 jQWidgets jqxGauge 的常用方法。

method('val', [value])

• Description: 获取或设置仪表盘的当前值。
• Parameters:
  • value：可选参数，要设置的值。
• Returns: 仪表盘的当前值。

// 获取当前值
var val = $('#jqxgauge').jqxGauge('val');

// 设置当前值
$('#jqxgauge').jqxGauge('val', 75);

事件

以下是 jQWidgets jqxGauge 的常用事件。

event('valueChanged')

• Description: 当仪表盘的值改变时触发该事件。可以使用 event.args.value 获取新的值。

$('#jqxgauge').on('valueChanged', function (event) {
  console.log('当前值：' + event.args.value);
});

参考文档

1. jQWidgets jqxGauge Documentation。

以上就是 jQWidgets jqxGauge 完整参考的介绍。