73 строки
1.3 KiB
HTML
73 строки
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Treemap</title>
|
|
|
|
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css" />
|
|
<link rel="stylesheet" href="../dist/all.css" />
|
|
|
|
<script src="http://localhost/kendo/dist/js/jquery.min.js"></script>
|
|
<script src="http://localhost/kendo/dist/js/kendo.all.min.js"></script>
|
|
|
|
<style type="text/css">
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="container">
|
|
<legend>Treemap</legend>
|
|
|
|
<div data-role="treemap"
|
|
data-source="{
|
|
data: [{
|
|
name: 'Root',
|
|
items: [
|
|
{ name: 'foo', value: 1 },
|
|
{ name: 'bar', value: 2 },
|
|
{ name: 'baz', value: 3 }
|
|
]
|
|
}]
|
|
}"
|
|
data-value-field="value"
|
|
data-text-field="name"
|
|
data-colors="['red', 'green']"
|
|
></div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
kendo.init( $(".container") );
|
|
|
|
$("[data-role='treemap']").getKendoTreeMap().setOptions({type: "vertical"})
|
|
</script>
|
|
<script>
|
|
// $("#treeMap").kendoTreeMap({
|
|
// dataSource: {
|
|
// data: [{
|
|
// name: "foo",
|
|
// value: 1,
|
|
// items: [{
|
|
// name: "bar",
|
|
// value: 1
|
|
// },{
|
|
// name: "baz",
|
|
// value: 1
|
|
// }]
|
|
// }],
|
|
// schema: {
|
|
// model: {
|
|
// children: "items"
|
|
// }
|
|
// }
|
|
// },
|
|
// type: "horizontal",
|
|
// valueField: "value",
|
|
// textField: "name"
|
|
// });
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |