博客

jQWidgets jqxTreeMap colorRange属性

  • Post category:jquery

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

jQWidgets jqxTreeMap colorRange 属性

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

语法

$('#treemap').jqxTreeMap({
  colorRange: ['#f7f7f7', '#252525']
});

参数

  • colorRange：数据项的颜色范围，可以是颜色、十六进制值或 RGB 值的数组。

示例

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

示例 1

// 创建 jqxTreeMap 组件
$('#treemap').jqxTreeMap({
  width: 600,
  height: 400,
  source: dataAdapter,
  colorRange: ['#f7f7f7', '#252525'],
  colorMode: 'range',
  legendScaleCallback: function (value) {
    return value.toFixed(2);
  }
});

在示例 1 中，我们使用 jqxTreeMap() 方法创建了一个 jqxTreeMap 组件，并使用 { width: 600, height: 400, source: dataAdapter, colorRange: ['#f7f7f7', '#252525'], colorMode 'range', legendScaleCallback: [...] } 设置了组件的宽度、高度、数据源、颜色范围、颜色模式和图例比例尺回调函数。在此示例中，我们使用 '#f7f7f7' 和 '#252525' 两种颜色作为颜色范围，将数据项的颜色设置为根据数据值在颜色范围内进行插值计算得到的颜色。

示例 2

// 创建 jqxTreeMap 组件
$('#treemap').jqxTreeMap({
  width: 600,
  height: 400,
  source: dataAdapter,
  colorRange: ['#d7191c', '#1a9641'],
  colorMode: 'range',
  legendScaleCallback: function (value) {
    return value.toFixed(2);
  }
});

在示例 2 中，我们使用 jqxTreeMap() 方法创建了一个 jqxTreeMap 组件，并使用 { width: 600, height: 400, source: dataAdapter, colorRange: ['#d7191c', '#1a9641'], colorMode: 'range', legendScaleCallback: [...] } 设置了组件的宽度、高度、数据源、颜色范围、颜色模式和图例比例尺回调函数。在此示例中，我们使用 '#d7191c' 和 '#1a9641' 两种颜色作为颜色范围，将数据项的颜色设置为根据数据值在颜色范围内进行插值计算得到的颜色。

总之，colorRange 属性可以让您控制数据项的颜色范围，以便更好地展示数据。您可以将其设置为颜色名称、十六进制值或 RGB 值的数组，以适应不同的设计需求。

Tags: