📌  相关文章
📜  jQWidgets jqxBarGauge 完整参考(1)

📅  最后修改于: 2023-12-03 14:43:20.120000             🧑  作者: Mango

jQWidgets jqxBarGauge 完整参考

1 简介

jQWidgets jqxBarGauge 是一款基于 JavaScript 的数据可视化组件库，专门用于可视化展示数据。特别适用于基于 Web 的应用，支持 HTML5 和 CSS3 的标准。jqxBarGauge 是其中一款组件之一，它提供了一种交互式的方式来呈现数据，并允许用户对其进行操作和控制。

2 主要特性
  • 支持多种不同的数据类型，包括数字、日期和字符串等。
  • 自定义样式和外观，包括颜色、大小、形状和字体等。
  • 支持动画效果，使其更具有视觉吸引力。
  • 支持鼠标和键盘事件，允许用户与组件进行交互。
  • 支持响应式设计，使其能够适应不同的屏幕大小和设备。
3 使用方法
3.1 安装

可以通过以下方式来安装 jQWidgets jqxBarGauge：

  1. 通过 npm 安装：
npm install jqwidgets-ng
  1. 直接引入 CDN：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-ng/dist/jqwidgets/styles/jqx.base.css" />
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-ng/dist/jqwidgets/jqxcore.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-ng/dist/jqwidgets/jqxbargauge.js"></script>
3.2 基本使用

以下是一个简单的例子，展示了如何使用 jQWidgets jqxBarGauge：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jqxBarGauge Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-ng/dist/jqwidgets/styles/jqx.base.css" />
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-ng/dist/jqwidgets/jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-ng/dist/jqwidgets/jqxbargauge.js"></script>
</head>

<body>
    <div id="jqxBarGauge"></div>
    <script>
        // 初始化 jqxBarGauge 组件
        const settings = {
            width: 600,
            height: 400,
            max: 100,
            colorScheme: 'scheme01',
            values: [10, 25, 50, 75, 90],
        };
        const barGauge = jqwidgets.createInstance('#jqxBarGauge', 'jqxBarGauge', settings);
    </script>
</body>

</html>

在这个例子中，我们创建了一个 jqxBarGauge 的实例，设置了一些基本属性，如 width、height、max、colorScheme 和 values。最后，我们将其绘制在一个 div 容器中。运行这段代码，你将会得到一个简单的水平方向的条形图，其中包含了 10、25、50、75 和 90 的几个值。

3.3 配置项

以下是可供设置的一些主要属性：

3.3.1 宽度和高度

width 和 height 属性分别用于设置组件的宽度和高度。

const settings = {
    width: 600,
    height: 400,
};

3.3.2 最大值和最小值

max 和 min 属性分别用于设置组件的最大值和最小值。

const settings = {
    max: 100,
    min: 0,
};

3.3.3 颜色列表

colorScheme 属性用于设置颜色列表的编号，从 1 开始。

const settings = {
    colorScheme: 'scheme01',
};

3.3.4 值列表

values 属性用于设置数值列表，也可以通过 addValue() 方法动态添加。

const settings = {
    values: [10, 25, 50, 75, 90],
};

3.3.5 边框

borderWidth、borderColor 和 borderOpacity 属性分别用于设置组件边框的宽度、颜色和透明度。

const settings = {
    borderWidth: 2,
    borderColor: '#000',
    borderOpacity: 1,
};

3.3.6 标签颜色

labelsColor 属性用于设置标签的颜色，包括刻度标签和值标签。

const settings = {
    labelsColor: '#000',
};

3.3.7 标签字体

labelsFontFamily、labelsFontSize、labelsFontWeight 和 labelsFontStyle 属性分别用于设置标签的字体系列、字体大小、字体粗细和字体风格。

const settings = {
    labelsFontFamily: 'Arial',
    labelsFontSize: '14px',
    labelsFontWeight: 'bold',
    labelsFontStyle: 'italic',
};

3.3.8 视觉效果

animateDuration、animationDelay 和 animationType 属性分别用于设置组件的动画时长、延迟时间和动画类型。

const settings = {
    animateDuration: 1000,
    animationDelay: 0,
    animationType: 'linear',
};

3.3.9 事件

mouseover、mouseout、click 和 valueChanged 等事件分别用于设置组件的鼠标事件、点击事件和数值变化事件：

const settings = {
    mouseover: function (event) {
        console.log('mouseover', event);
    },
    mouseout: function (event) {
        console.log('mouseout', event);
    },
    click: function (event) {
        console.log('click', event);
    },
    valueChanged: function (event) {
        console.log('valueChanged', event);
    },
};
3.4 方法

以下是可供调用的一些主要方法：

3.4.1 开始动画

startAnimation() 方法可以用于开始动画效果。

const settings = {};
const barGauge = jqwidgets.createInstance('#jqxBarGauge', 'jqxBarGauge', settings);

// 开始动画
barGauge.startAnimation();

3.4.2 添加数值

addValue() 方法可以用于添加新的数值。

const settings = {};
const barGauge = jqwidgets.createInstance('#jqxBarGauge', 'jqxBarGauge', settings);

// 添加新的数值
barGauge.addValue(Math.floor(Math.random() * 100));

3.4.3 清除数值

clearValues() 方法可以用于清空所有数值。

const settings = {};
const barGauge = jqwidgets.createInstance('#jqxBarGauge', 'jqxBarGauge', settings);

// 清空所有数值
barGauge.clearValues();

3.4.4 取得数值

getValues() 方法可以用于获取所有数值。

const settings = {};
const barGauge = jqwidgets.createInstance('#jqxBarGauge', 'jqxBarGauge', settings);

// 获取所有数值
const values = barGauge.getValues();
console.log(values);
4 总结

jQWidgets jqxBarGauge 是一款功能强大的数据可视化组件，它提供了丰富的配置项和方法，可以帮助开发者快速构建交互式的数据展示界面。对于前端开发者来说，熟练掌握 jQWidgets jqxBarGauge 的使用方法，将会大大提高开发效率和工作质量。