博客

jQWidgets jqxHeatMap legendSettings属性

  • Post category:jquery

jQWidgets jqxHeatMap legendSettings属性

jQWidgets jqxHeatMap 是一种热力图控件，用于在 Web 应用程序中创建热力图。legendSettings 属性是 jqxHeatMap 控件的一个属性，用于设置热力图的图例。

属性

legendSettings 属性用于设置 jqxHeatMap 控件的图例。该属性是一个对象，包含以下属性：

  • visible：表示图例是否可见。该属性接受一个布尔值，默认值为 true。
  • position：表示图例的位置。该接受一个字符串参数，可以是 "top", "bottom", "left", "right" 或 "custom"。默认值为 "bottom"。
  • width：表示图例的宽度。该属性接受一个数字参数，默认值为 100。
  • height：表示图例的高度。该属性接受一个数字参数，默认值为 200。
  • padding：表示图例的内边距。该属性接受一个数字参数，默认值为 10。
  • title：表示图例的标题。该属性接受一个字符串参数，默认值为 ""。
  • titlePadding：表示图例标题的内边距。该属性接受一个数字参数，默认值为 2。
  • source：表示图例的数据源。该属性接受一个数组参数，默认值为 null。
  • colorScale：表示图例的颜色比例尺。该属性接受一个对象参数，包含以下属性：
  • colors：表示颜色比例尺的颜色数组。该属性接受一个数组参数，默认值为 ["#000000", "#ffffff"]。
  • minValue：表示颜色比例尺的最小值。该属性接受一个数字参数，默认值为 0。
  • maxValue：表示颜色比例尺的最大值。该属性接受一个数字参数，默认值为 100。
  • name：表示颜色比例尺的名称。该属性接受一个字符串参数，默认值为 ""。
  • useGradient：表示是否使用渐变色。该属性接受一个布尔值，默认值为 true。
  • showRanges：表示是否显示颜色比例尺的范围。该属性接受一个布尔值，默认值为 true。

以下是一个示例：

// jqxHeatMap 控件
$("#jqxHeatMap").jqxHeatMap({
    source: data,
    legendSettings: {
        visible: true,
        position: "bottom",
        width: 200,
        height: 20,
        padding: 5,
        title: "Legend",
        titlePadding: 2,
        source: null,
        colorScale: {
            colors: ["#000000", "#ffffff"],
            minValue: 0,
            maxValue: 100,
            name: "",
            useGradient: true,
            showRanges: true
        }
    }
});

在上述代码中，我们创建了 jqxHeatMap 控件，并使用 legendSettings 属性设置热力图的图例。我们设置图例可见，位置在底部，宽度为 200 像素，高度为 20 像素，内边距为 5 像，标题为 “Legend”，标题内边距为 2 像素，数据源为 null，颜色比例尺的颜色数组为 ["#000000", "#ffffff"]，最小值为 0，最大值为 100，名称为空字符串，使用渐变色，显示颜色比例尺的范围。

示例

以下是两个示例演示如何使用 legendSettings 属性。

示例 1

在此示例中，我们创建了一个 jqxHeatMap 控件，并使用 legendSettings 属性设置热力图的图例。我们设置图例可见，位置在右侧，宽度为 100 像素，高度为 200 像素，内边距为 10素，标题为 “Legend”，标题内边距为 2 像素，数据源为 null，颜色比例尺的颜色数组为 ["#000000", "#ffffff"]，最小值为 0，最大值为 100，名称为空字符串，使用渐变色，显示颜色比例尺的范围。

<div id="jqxHeatMap"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxHeatMap 控件
        $("#jqxHeatMap").jqxHeatMap({
            source: data,
            legendSettings: {
                visible: true,
                position: "right",
                width: 100,
                height: 200,
                padding: 10,
                title: "Legend",
                titlePadding: 2,
                source: null,
                colorScale: {
                    colors: ["#000000", "#ffffff"],
                    minValue: 0,
                    maxValue: 100,
                    name: "",
                    useGradient: true,
                    showRanges: true
                }
            }
        });
    });
</script>

在上述代码中，我们创建了一个 jqxHeatMap 控件，并使用 legendSettings 属性设置热力图的图例。我们设置图例可见，位置在右侧，宽度为 100 像素，高度为 200 像素，内边距为 10 像素，标题为 “Legend”，标题内边距为 2 像素，数据源为 null，颜色比例尺的颜色数组为 ["#000000", "#ffffff"]，最小值为 0，最大值为 100，名称为空字符串，使用渐变色，显示颜色比例尺的范围。

示例 2

在此示例中，我们创建了一个 jqxHeatMap 控件，并使用 legendSettings 属性设置热力图的图例。我们设置图例不可见。

<div id="jqxHeatMap"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxHeatMap 控件
        $("#jqxHeatMap").jqxHeatMap({
            source: data,
            legendSettings: {
                visible: false
            }
        });
    });
</script>

在上述代码中，我们创建了一个 jqxHeatMap 控件，并使用 legendSettings 属性设置热力图的图例。我们设置图例不可见。

以上是 jqxHeatMap 的 legendSettings 属性的详细说明，以及两个示例。在示例中，我们使用 legendSettings 属性设置热力图的图例。

Tags: