jQWidgets jqxTreeMap 完整参考

概述

jQWidgets jqxTreeMap 是一个用于创建交互式树图的 JavaScript 库。它能够呈现大量小时的数据，并帮助用户从数据中发现模式、趋势和关系。

本文将提供 jqxTreeMap 的完整参考，包括 API、属性、事件和使用示例等。

API 参考

以下是 jqxTreeMap 的主要 API：

append 方法

向树图中添加新的数据。

append(data: any | Array<any>): void

参数：

• data：要添加到树图中的数据或数据数组。

destroy 方法

销毁树图。

destroy(): void

render 方法

渲染树图。

render(): void

refresh 方法

刷新树图。

refresh(): void

update 方法

更新树图的数据。

update(data: any | Array<any>): void

参数：

• data：新的数据或数据数组。

属性参考

以下是 jqxTreeMap 的主要属性：

backgroundColor

树图的背景颜色。

backgroundColor?: string

baseColor

用于生成树图矩形颜色的基本颜色。

baseColor?: string

colorRanges

颜色范围数组，用于基于数据值在树图中显示不同的颜色。

colorRanges?: Array<{minValue: number, maxValue: number, color: string}>

dataField

树图数据的字段。

dataField?: string

displayMember

要在树图上显示的字段。

displayMember?: string

height

树图的高度。

height?: string | number

hoverEnabled

是否启用鼠标悬停效果。

hoverEnabled?: boolean

legendPosition

图例的位置。

legendPosition?: 'left' | 'top' | 'right' | 'bottom'

renderCallbacks

渲染时要调用的回调函数数组。

renderCallbacks?: Array<() => void>

source

要用于树图的数据。

source?: any[]

tooltip

提示框的配置。

tooltip?: {content?: (item?: any) => string, autoHide?: boolean, position?: string}

valueMember

用于计算树图方块面积的数据字段。

valueMember?: string

width

树图的宽度。

width?: string | number

事件参考

以下是 jqxTreeMap 的主要事件：

itemClick

单击树图矩形时触发。

itemClick: (event: any, element: any) => void

参数：

• event：单击事件对象。
• element：被单击的树图矩形元素。

itemMouseEnter

鼠标进入树图矩形时触发。

itemMouseEnter: (event: any, element: any) => void

参数：

• event：鼠标进入事件对象。
• element：被鼠标进入的树图矩形元素。

itemMouseLeave

鼠标离开树图矩形时触发。

itemMouseLeave: (event: any, element: any) => void

参数：

• event：鼠标离开事件对象。
• element：被鼠标离开的树图矩形元素。

使用示例

以下是一个基本的 jqxTreeMap 示例：

<div id="treeMapContainer"></div>

import { jqxTreeMap } from 'jqwidgets-scripts/jqwidgets-esm';

const data = [
  { label: 'Asia', value: 3500 },
  { label: 'North America', value: 5000 },
  { label: 'South America', value: 3000 },
  { label: 'Europe', value: 6000 },
  { label: 'Africa', value: 2500 },
  { label: 'Australia', value: 2000 }
];

const treeMap = new jqxTreeMap('treeMapContainer', {
  source: data,
  width: 600,
  height: 400,
  displayMember: 'label',
  valueMember: 'value'
});

该代码将创建一个简单的树图，显示不同大洲的人口数量。