76 строки
2.0 KiB
HTML
76 строки
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Bar charts</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">
|
|
.chart-vars {
|
|
width: 20em;
|
|
height: 20em;
|
|
display: flex;
|
|
align-items: stretch;
|
|
align-content: stretch;
|
|
flex-flow: row wrap;
|
|
}
|
|
.var { 1px; flex: 1 1 4em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="container">
|
|
<legend>Bar charts</legend>
|
|
|
|
<div data-role="chart"
|
|
data-series-defaults="{
|
|
type: 'bar'
|
|
}"
|
|
data-series="[
|
|
{ data: [3.907, 7.943, 7.848, 9.284, 9.801, 3.890, 8.238, 9.552, 6.855] },
|
|
{ data: [-0.253, 0.362, -3.519, 1.799, 3.343, 0.843, 2.877, -5.416, 5.590] }
|
|
]"
|
|
data-tooltip="{
|
|
visible: true
|
|
}"
|
|
></div>
|
|
|
|
|
|
<div class="chart-vars">
|
|
<span class="var k-var--accent"></span>
|
|
<span class="var k-var--base"></span>
|
|
<span class="var k-var--background"></span>
|
|
<span class="var k-var--border-radius"></span>
|
|
<span class="var k-var--normal-background"></span>
|
|
<span class="var k-var--normal-text-color"></span>
|
|
<span class="var k-var--hover-background"></span>
|
|
<span class="var k-var--hover-text-color"></span>
|
|
<span class="var k-var--selected-background"></span>
|
|
<span class="var k-var--selected-text-color"></span>
|
|
<span class="var k-var--success"></span>
|
|
<span class="var k-var--info"></span>
|
|
<span class="var k-var--warning"></span>
|
|
<span class="var k-var--error"></span>
|
|
<span class="var k-var--series-a"></span>
|
|
<span class="var k-var--series-b"></span>
|
|
<span class="var k-var--series-c"></span>
|
|
<span class="var k-var--series-d"></span>
|
|
<span class="var k-var--series-e"></span>
|
|
<span class="var k-var--series-f"></span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
kendo.init( $(".container") );
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |