jQWidgets jqxTreeMap hoverEnabled属性

以下是关于 jQWidgets jqxTreeMap 组件中 hoverEnabled 属性的详细攻略。

jQWidgets jqxTreeMap hoverEnabled 属性

jQWidgets jqxTreeMap 的 hoverEnabled 属性用于启用或禁用标悬停事件。您可以使用此属性来控制是否允许用户在鼠标悬停时查看数据项的详细信息。

语法

$('#treemap').jqxTreeMap({
  hoverEnabled: true
});

参数

• hoverEnabled：一个布尔值，指示是否启用鼠标悬停事件。

示例

以下两个示例演示了如何使用 hoverEnabled 属性。

示例 1

// 创建 jqxTreeMap 组件
$('#treemap').jqxTreeMap({
  width: 600,
  height: 400,
  source: dataAdapter,
  hoverEnabled: true,
  colorMode: 'range',
  colorRange: ['#f7f7f7', '#252525']
});

在示例 1 中，我们使用 jqxTreeMap() 方法创建了一个 jqxMap 组件，并使用 { width:600 height: 400, source: dataAdapter, hoverEnabled: true, colorMode: 'range', colorRange: ['#f7f7f7', '#252525'] } 设置了组件的宽度、高度、数据源、鼠标悬停事件、色模式和色范围。在此示例中，我们启用了鼠标悬停事件，以便用户可以在鼠标悬停时查看数据项的详细。

示例2

// 创建 jqxTreeMap 组件
$('#treemap').jqxTreeMap({
  width: 600,
  height: 400,
  source: dataAdapter,
  hoverEnabled: false,
  colorMode: 'custom',
  colorRanges: [
    { min: 0, max: 20, color: '#d7191c' },
    { min: 20, max: 40, color: '#fdae61' },
    { min: 40, max: 60, color: '#ffffbf' },
    { min: 60, max: 80, color: '#a6d96a' },
    { min: 80, max: 100, color: '#1a9641' }
  ]
});

在示例 2 中，我们使用 jqxTreeMap() 方法创建了一个 jqxTreeMap 组件，并使用 { width: 600, height: 400, source: dataAdapter, hoverEnabled: false, colorMode: 'custom', colorRanges: [...] } 设置了组件的宽度、高度、数据源、禁用鼠标悬停事件、颜色模式和自定义颜色范围。在此示例中，我们禁用了鼠标悬停事件，以便用户无法在鼠标悬停时查看数据项的详细信息。

总之，hoverEnabled 属性可以让您控制是否启用鼠标悬停事件，以便用户可以在鼠标悬停时查看数据项的详细信息。您可以将其设置为 true 或 false，以适应不同的设计需求。