jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
115 lines (107 loc) • 3.72 kB
HTML
<html lang="en">
<head>
<title id='Description'>TreeMap Custom Element AutomaticRendering</title>
<meta name="description" content="This is an example of automatic rendering in TreeMap Custom Element." />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxtreemap.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
var data = [
{
label: 'USA',
value: 104
},
{
label: 'People\'s Republic of China',
value: 88
},
{
label: 'Great Britain',
value: 65
},
{
label: 'Russian Federation',
value: 82
},
{
label: 'Germany',
value: 44
},
{
label: 'Republic of Korea',
value: 28
},
{
label: 'France',
value: 34
},
{
label: 'Italy',
value: 28
},
{
label: 'Hungary',
value: 17
},
{
label: 'Australia',
value: 35
},
{
label: 'Japan',
value: 38
},
{
label: 'Kazakhstan',
value: 13
},
{
label: 'Netherlands',
value: 20
},
{
label: 'Ukraine',
value: 20
},
{
label: 'New Zealand',
value: 13
},
{
label: 'Cuba',
value: 14
}
];
JQXElements.settings['treeMapSettings'] =
{
source: data,
colorRange: 100,
colorMode: 'autoColors',
baseColor: '#52CBFF',
legendScaleCallback: function (v) {
v = v.toFixed(1);
return v;
},
legendLabel: 'Olympic medal count - London 2012'
};
</script>
<style>
.jqx-treemap-legend {
background: rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<div class="example-description">
This example demonstrates the "autoColors" rendering mode of TreeMap Custom Element. In that mode, the color of each area depends on its "value" in the data source and the TreeMap's "baseColor" and "colorRange" properties. "baseColor" is the color that will vary in the automatic rendering. "colorRange" determines the range in which the base color can vary.
</div>
<jqx-tree-map settings="treeMapSettings"></jqx-tree-map>
</body>
</html>