jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
113 lines (108 loc) • 3.97 kB
HTML
<html lang="en">
<head>
<title id='Description'>This example demonstrates the "autoColors" rendering mode of jqxTreeMap. In that mode, the color of each area depends on its "value" in the data source and the jqxTreeMap'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.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<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" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxtreemap.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script>
$(function () {
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
}
];
$('#treemap').jqxTreeMap({
width: getWidth("TreeMap"),
height: 400,
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 id="treemap"></div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>