jQWidgets jqxBulletChart 完整参考

概述

jQWidgets jqxBulletChart 是一个强大的、轻量级的图表控件，用于显示多个数据系列之间的关系。它支持多种不同类型的图表，如垂直和水平的条形图、折线图、双轴折线图等。jqxBulletChart 还支持与多个数据源交互，并提供了丰富的 API，使得开发者可以更加方便地配置和管理该控件。

特性

• 支持多种不同类型的图表，如水平条形图、垂直条形图、折线图、双轴折线图等；
• 支持多个数据源的交互；
• 支持丰富的 API，使得开发者可以更加方便地配置和管理该控件；
• 支持主题定制。

使用示例

<script type="text/javascript">
  $(document).ready(function () {
    // 初始化 jqxBulletChart
    $('#jqxBulletChart').jqxBulletChart({
      // 绑定数据源
      dataSource: [
        {
          title: '销售额', // 数据类型名称
          description: '每年的销售额', // 数据类型描述
          ranges: [
            { startValue: 0, endValue: 40 }, // 目标范围 1
            { startValue: 40, endValue: 70 }, // 目标范围 2
            { startValue: 70, endValue: 100 } // 目标范围 3
          ],
          pointer: { value: 35 } // 数据指针
        }
      ]
    });
  });
</script>

<!-- 在页面中添加一个 jqxBulletChart -->
<div id="jqxBulletChart"></div>

API 参考

配置选项

| 选项名称 | 类型 | 描述 | 默认值 | | --- | --- | --- | --- | | animationDuration? | Number | 动画持续时间，单位为毫秒。 | 0 | | barSize? | String | 条形图的尺寸。可以是百分比（如 "50%"），也可以是像素值（如 "100px"）。 | "40%" | | description? | String/Object | 数据类型的描述信息。可以是一个字符串，也可以是具有以下属性的对象：text（字符串，描述信息）和class（字符串，用于自定义样式）。 | null | | disabled? | Boolean | 是否禁用控件。 | false | | height? | String/Number | 控件的高度。可以是一个数字，也可以是一个字符串（如 "100px"）。 | 200 | | labelsFormatFunction? | Function | 提供自定义的标签格式化函数。函数的参数是标签值。函数应该返回一个字符串。 | null | | orientation? | String | 控件的方向。可以是 "horizontal"（水平）或 "vertical"（垂直）。 | "horizontal" | | pointer? | Object | 定义数据指针的属性。具有以下属性：value（数字，指针的值）和size（数字，指针的尺寸）。 | null | | ranges? | Array | 定义目标范围的属性。数组包括每个范围的对象，这些对象具有以下属性：startValue（数字，范围的起始值），endValue（数字，范围的结束值）和color（字符串，范围的颜色）。 | [] | | showTooltip? | Boolean | 是否在光标悬停在控件上时显示提示。 | true | | target? | Object | 定义目标值的属性。具有以下属性：value（数字，目标值）和size（数字，目标的尺寸）。 | null | | theme? | String | 控件的主题。 | "material" | | title? | String/Object | 数据类型的标题。可以是一个字符串，也可以是具有以下属性的对象：text（字符串，标题文本）和class（字符串，用于自定义样式）。 | null | | width? | String/Number | 控件的宽度。可以是一个数字，也可以是一个字符串（如 "100px"）。 | 300 |

方法

| 方法名称 | 描述 | | --- | --- | | destroy() | 销毁控件。 | | render() | 渲染控件。 |

事件

| 事件名称 | 描述 | | --- | --- | | valueChanged | 当数据指针的值发生更改时触发。事件对象中包含一个名为'value'的属性，表示数据指针的新值。 |

总结

jQWidgets jqxBulletChart 是一个功能强大且易于使用的控件，用于显示多个数据系列之间的关系。它支持多种不同类型的图表，可以与多个数据源交互，并支持主题定制。开发者可以使用丰富的 API 来配置和管理该控件。