📌  相关文章
📜  jQWidgets jqxTreeMap hoverEnabled 属性(1)

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

jQWidgets jqxTreeMap hoverEnabled 属性介绍

简介

jQWidgets 是一个专业的前端UI框架，其中jqxTreeMap是其中的一款组件控件。jqxTreeMap是一种数据可视化工具，它以树状节点结构的形式展示数据。hoverEnabled是其一个重要的属性。

hoverEnabled 属性

hoverEnabled决定是否支持鼠标悬停事件。当其enabled时，组件的hover效果将开启，用户的鼠标滑过节点时，会出现特定的提示信息。

用法

hoverEnabled属性是通过JSON对象定义的。下面是它的默认值：

  var settings = {
    hoverEnabled: false
  }

true表示开启hover效果，false表示关闭。

实例

下面是一个简单的演示例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQWidgets jqxTreeMap hoverEnabled属性演示</title>
    <link rel="stylesheet" href="https://jqwidgets.github.io/jqwidgets/styles/jqx.base.css">
    <script type="text/javascript" src="https://jqwidgets.github.io/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://jqwidgets.github.io/jqwidgets/scripts/demos.js"></script>
    <script type="text/javascript" src="https://jqwidgets.github.io/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://jqwidgets.github.io/jqwidgets/jqxtreemap.js"></script>
</head>
<body>
    <div id="jqxTreeMap"></div>
    <script>
        $(document).ready(function () {
            var data = [{
                'id': '1',
                'parentid': '-1',
                'text': '日本',
                'value': '127.3'
            }, {
                'id': '2',
                'parentid': '1',
                'text': '东京',
                'value': '13.5'
            }, {
                'id': '3',
                'parentid': '1',
                'text': '大阪',
                'value': '8.9'
            }, {
                'id': '4',
                'parentid': '-1',
                'text': '中国',
                'value': '139.3'
            }, {
                'id': '5',
                'parentid': '4',
                'text': '北京',
                'value': '21.7'
            }, {
                'id': '6',
                'parentid': '4',
                'text': '上海',
                'value': '23.7'
            }];

            // 初始化jqxTreeMap组件
            $('#jqxTreeMap').jqxTreeMap({
                source: data,
                width: 400,
                height: 400,
                hoverEnabled: true
            });
        });
    </script>
</body>
</html>

演示结果如下：

演示结果

总结

通过以上简单介绍，我们可以看到hoverEnabled属性在数据可视化工具中扮演着非常重要的角色。它能够让用户更直观的了解数据。而在jqxTreeMap组件中，通过简单的属性设置，我们可以很方便的控制hover效果的开启和关闭。