以下是关于 jQWidgets jqxTreeMap 组件中 legendPosition 属性的详细攻略。
jQWidgets jqxTreeMap legendPosition 属性
jQWidgets jqxTreeMap 的 legendPosition 属性用于设置图例的位置。您可以使用此属性来控制图例的位置,以便更好地展示数据。
语法
$('#treemap').jqxTreeMap({
legendPosition: 'top'
});
参数
legendPosition
:一个字符串,指示图例的位置。可选值包括:’top’、’bottom、’left’ 和 ‘right’。
示例
以下两个示例演示了如何使用 legendPosition 属性。
示例 1
// 创建 jqxTreeMap 组件
$('#treemap').jqxTreeMap({
width: 600,
height: 400,
source: dataAdapter,
colorMode: 'range',
colorRange: ['#f7f7f7', '#252525'],
legendPosition: 'top'
});
在示例 1 中,我们使用 jqxTreeMap()
方法创建了一个 jqxTreeMap 组件,并使用 { width: 600, height: 400, source: dataAdapter, colorMode: 'range', colorRange: ['#f7f7f7', '#252525'], legendPosition: 'top' }
设置了组件的宽度、高度、数据源、颜色模式、颜色范围和图例位置。在此示例中,我们将图例位置设置为顶部。
示例2
// 创建 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 }
],
legendPosition: 'right'
});
在示例 2 中,我们使用 jqxTreeMap()
方法创建了一个 jqxTreeMap 组件,并使用 { width: 600, height: 400, source: dataAdapter, colorMode: 'custom', color: [...], legendPosition: 'right' }
设置了组件的宽度、高度、数据源、颜色模式、自定义颜色范围和图例位置。在此示例中,我们将图例位置设置为侧。
总之,legendPosition 属性可以让您控制图例的位置,以便更好地展示数据。您可以将其设置为 ‘top’、bottom’、’left’ 或 ‘right’,以适应不同的设计需求。