jQWidgets jqxHeatMap yAxis 属性

jqxHeatMap 是 jQWidgets 提供的一种热力图控件，用于在 Web 应用程序中创建热力图。yAxis 属性用于设置 jqxHeatMap 控件的 Y 轴。以下是jqxHeatMap的yAxis` 属性的详细说明：

属性

yAxis 属性用于设置 jqxHeatMap 控件的 Y 轴。该属性是一个对象，包含了多个子属性，用于设置 Y 轴的各种属性。

子属性

以下是 yAxis 属性的子属性列表：

• dataField：用于设置 Y 轴的数据字段名。
• displayText：用于设置 Y 轴的显示文本。
• description：用于设置 Y 轴的描述信息。
• position：用于设置 Y 轴的位置。该属性的值可以是 "top"、"bottom"、"left" 或 "right"。
• type：用于设置 Y 轴的类型。该属性的可以是 "numeric" 或 "category"。
• valuesOnTicks：于设置 Y 轴的值是否显示在刻度上。该属性的值可以是 true 或 false。
• title：用于设置 Y 轴的标题。
• tickMarks：用于设置 Y 轴的刻度线样式。属性的值可以是 "none"、"topLeft"、"bottomRight"、"both" 或 "center"。
• unitInterval：用于设置 Y 轴的刻度间隔。

// 设置 jqxHeatMap 控件的 Y 轴
$("#jqxHeatMap").jqxHeatMap({
    yAxis: {
        dataField: "y",
 displayText: "Y Axis",
        description: "Y Axis Description",
        position: "left",
        type: "numeric",
        valuesOnTicks: true,
        title: "Y Axis Title",
        tickMarks: "both",
        unitInterval: 10
    }
});

示例

以下是两个示例，演示如何使用 yAxis 属性设置 jqxHeatMap 控的 Y 轴。

示例 1

在此示例中，我们创建了一个 jqxHeatMap 控件，并使用 source 属性设置了热力图的数据源。我们使用 yAxis 属性设置了 jqxHeatMap 控件的 Y 轴。

<div id="jqxHeatMapdiv>

<script>
    $(document).ready(function () {
        // 设置热力图数据源
        var source = [
            { x: 0, y: 0, value: 10 },
            { x: 0, y: 1, value: 20 },
            { x: 0, y: 2, value: 30 },
            // ...
        ];

        // 创建 jqxHeatMap 控件
        $("#jqxHeatMap").jqxHeatMap({
            source: source,
            yAxis: {
                dataField: "y",
                displayText: "Y Axis",
                description: "Y Axis Description",
                position: "left",
                type: "numeric",
                valuesOnTicks: true,
                title: "Y Axis Title",
                tickMarks: "both",
                unitInterval: 10
            }
        });
    });
</script>

示例 2

在此示例中，我们创建了一个 jqxHeatMap 控件，并使用 source 属性设置了热力图的数据源。我们使用 yAxis 属性设置了 jqxHeatMap 控件的 Y 轴，并使用 showLegend 属性启用了热力图的图例。

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

<script>
    $(documentready(function () {
        // 设置热力图数据源
        var source = [
            { x: 0, y: 0, value: 10 },
            { x: 0, y: 1, value: 20 },
            { x: 0, y: 2, value: 30 },
            // ...
        ];

        // 创建 jqxHeatMap 控件
        $("#jqxHeatMap").jqxHeatMap({
            source: source,
            yAxis: {
                dataField: "y",
                displayText: "Y Axis",
                description: "Y Axis Description",
                position: "left",
                type: "numeric",
                valuesOnTicks: true,
                title: "Y Axis Title",
                tickMarks: "both",
                unitInterval: 10
            },
            showLegend: true
        });
    });
</script>

以上是 jqxHeatMap 的 yAxis 属性的详细说明，以及两个示例说明。