博客

jQWidgets jqxTreeMap colorRanges属性

  • Post category:jquery

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

jQWidgets jqxTreeMap colorRanges 属性

jQWidgets jqxTreeMap colorRanges 属性用于设置组件中数据项的颜色范围。您可以使用此属性来控制数据项的颜色，以便更好地展示数据。

语法

$('#treemap').jqxTreeMap({
  colorMode: 'custom',
  colorRanges: [
    { min: 0, max: 20, color: '#d7191c' },
    { min: 20,: 40, color: '#fdae61' },
    { min: 40, max: 60, color: '#ffffbf' },
    { min: 60, max: 80, color: '#a6d96a' },
    { min: 80, max: 100, color: '#1a9641' }
  ]
});

参数

  • colorRanges：数据项的颜色范围。每个颜色范围都是一个对象，包含 min、max 和 color 三个属性。min 和 max 属性用于指定数据项的值范围，color 属性用于指定该范围内数据项的颜色。

示例

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

示例 1

// 创建 jqxTreeMap 组件
$('#treemap').jqxTreeMap({
  width: 600,
  height: 400,
  source: dataAdapter,
  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' }
  ]
});

在示例 1 中，我们使用 jqxTreeMap() 方法创建了一个 jqxTreeMap 组件，并使用 { width: 600, height: 400, source: dataAdapter, colorMode: 'custom', colorRanges: [...] } 设置了组件的宽度、高度、数据源、颜色模式和自定义颜色范围。在此示例中，我们使用 'custom' 颜色模式，将数据项的颜色设置为根据自定义颜色范围计算得到的颜色。

示例 2

// 创建 jqxTreeMap 组件
$('#treemap').jqxTreeMap({
  width: 600,
  height: 400,
  source: dataAdapter,
  colorMode: 'range',
  colorRange: ['#f7f7f7', '#252525'],
  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, colorMode: 'range', colorRange: ['#f7f7f7', '#252525'], colorRanges: [...] } 设置了组件的宽度、高度、数据源、颜色模式、颜色范围和自定义颜色范围。在此示例中，我们使用 'range' 颜色模式，将数据项的颜色设置为根据数据值在颜色范围内进行插值计算得到的颜色，并使用自定义颜色范围来覆盖默认的颜色范围。

总之，colorRanges 属性可以让您控制数据项的颜色范围，以便更好地展示数据。您可以使用自定义颜色范围来覆盖默认的颜色范围，或者在 'custom' 颜色模式下使用自定义颜色范围来控制数据项的颜色。

Tags: