jQWidgets jqxTreeMap showLegend属性

关于 jQWidgets jqxTreeMap 的 showLegend 属性，我给您详细介绍一下。

showLegend 属性

showLegend 属性用于确定在 treemap 图表中是否显示图例。默认情况下，它的值为 false，表示不显示图例。

下面是 showLegend 属性的语法：

showLegend: Boolean

其中，Boolean 表示这个属性的值只能为 true 或 false。

如果您想要在 treemap 图表中显示图例，可以将 showLegend 属性的值设置为 true，如下所示：

$("#jqxTreeMap").jqxTreeMap({
    showLegend: true
});

此时，treemap 图表将会显示图例。

示例说明

下面为您提供两个示例，以便更好地理解如何使用 showLegend 属性。

示例一

在这个例子中，我们将创建一个显示疫情数据的 treemap 图表，并显示图例。

// 数据源
var data = [
    { "id": "1", "parent": "", "value": 1000000, "label": "全球", 
      "color": "#FF6347" },
    { "id": "2", "parent": "1", "value": 420000, "label": "美国", 
      "color": "#9966CC" },
    { "id": "3", "parent": "1", "value": 330000, "label": "印度", 
      "color": "#FFD700" },
    { "id": "4", "parent": "1", "value": 280000, "label": "巴西", 
      "color": "#20B2AA" },
    { "id": "5", "parent": "1", "value": 270000, "label": "俄罗斯", 
      "color": "#CD853F" },
    { "id": "6", "parent": "1", "value": 260000, "label": "英国", 
      "color": "#A9A9A9" },
    { "id": "7", "parent": "1", "value": 230000, "label": "法国", 
      "color": "#FF1493" },
    { "id": "8", "parent": "1", "value": 200000, "label": "土耳其", 
      "color": "#32CD32" }
];

// 创建 treemap 图表，并显示图例
$("#jqxTreeMap").jqxTreeMap({
    source: data,
    showLegend: true,
    legendLabel: {
        text: "疫情数据",
        font: { size: 14 }
    }
});

如上所示，我们在创建 treemap 图表时，将 showLegend 属性的值设置为 true，因此图表显示了图例。此外，我们还自定义了图例标签的样式，让它更加美观。

示例二

在这个例子中，我们将创建一个显示演示数据的 treemap 图表，并将 showLegend 属性的值设置为 false。

// 数据源
var data = [
    { "id": "1", "parent": "", "value": 100, "label": "全国", "color": "#FF6347" },
    { "id": "2", "parent": "1", "value": 20, "label": "北京", "color": "#9966CC" },
    { "id": "3", "parent": "1", "value": 15, "label": "上海", "color": "#FFD700" },
    { "id": "4", "parent": "1", "value": 25, "label": "广州", "color": "#20B2AA" },
    { "id": "5", "parent": "1", "value": 30, "label": "深圳", "color": "#CD853F" },
    { "id": "6", "parent": "1", "value": 10, "label": "成都", "color": "#A9A9A9" },
    { "id": "7", "parent": "1", "value": 15, "label": "杭州", "color": "#FF1493" }
];

// 创建 treemap 图表，并隐藏图例
$("#jqxTreeMap").jqxTreeMap({
    source: data,
    showLegend: false
});

如上所示，我们在创建 treemap 图表时，将 showLegend 属性的值设置为 false，因此图表不显示图例。