Chart (Part 1)
This commit is contained in:
vinibiavatti
@@ -24,22 +24,22 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2" width="60%" class="blue-168-text">
|
||||
<br>System Time.........:<input type="text" class="tui-input white-168 black-text" value="[09:21:30]" style="width: 135px" />
|
||||
<br>System Date.........:<input type="text" class="tui-input white-168 black-text" value="[15/09/1994]" style="width: 135px" />
|
||||
<br>System Time.........:<input type="text" class="tui-input white-168 black-text" value="[09:21:30]" style="width: 150px" />
|
||||
<br>System Date.........:<input type="text" class="tui-input white-168 black-text" value="[15/09/1994]" style="width: 150px" />
|
||||
<br>
|
||||
<br>Legacy Diskette A...:<input type="text" class="tui-input white-168 black-text" value="[1.44/1.25 MB]" style="width: 135px" />]
|
||||
<br>Legacy Diskette B...:<input type="text" class="tui-input white-168 black-text" value="[disabeld]" style="width: 135px" />
|
||||
<br>Legacy Diskette A...:<input type="text" class="tui-input white-168 black-text" value="[1.44/1.25 MB]" style="width: 150px" />
|
||||
<br>Legacy Diskette B...:<input type="text" class="tui-input white-168 black-text" value="[disabeld]" style="width: 150px" />
|
||||
<br>
|
||||
<br>Primary Master......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
|
||||
<br>Primary Slave.......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
|
||||
<br>Secondary Master....:<input type="text" class="tui-input white-168 black-text" value="[CD-ROM]" style="width: 135px" />
|
||||
<br>Secondary Slave.....:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
|
||||
<br>Primary Master......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
|
||||
<br>Primary Slave.......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
|
||||
<br>Secondary Master....:<input type="text" class="tui-input white-168 black-text" value="[CD-ROM]" style="width: 150px" />
|
||||
<br>Secondary Slave.....:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
|
||||
<br>
|
||||
<br>Keyboard Features...:<input type="text" class="tui-input white-168 black-text" value="[Enter]" style="width: 135px" />
|
||||
<br>Keyboard Features...:<input type="text" class="tui-input white-168 black-text" value="[Enter]" style="width: 150px" />
|
||||
<br>
|
||||
<br>System Memory.......:<input type="text" class="tui-input white-168 black-text" value="[640 KB]" style="width: 135px" />
|
||||
<br>Extended Memory.....:<input type="text" class="tui-input white-168 black-text" value="[3568410 KB]" style="width: 135px" />
|
||||
<br>Boot-time Diagnostic:<input type="text" class="tui-input white-168 black-text" value="[Enabled]" style="width: 135px" />
|
||||
<br>System Memory.......:<input type="text" class="tui-input white-168 black-text" value="[640 KB]" style="width: 150px" />
|
||||
<br>Extended Memory.....:<input type="text" class="tui-input white-168 black-text" value="[3568410 KB]" style="width: 150px" />
|
||||
<br>Boot-time Diagnostic:<input type="text" class="tui-input white-168 black-text" value="[Enabled]" style="width: 150px" />
|
||||
</td>
|
||||
<td width="40%" class="center">Item Specified Help</td>
|
||||
</tr>
|
||||
|
||||
@@ -4,100 +4,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Chart Example</title>
|
||||
<script src="plugins/jquery-3.4.1.min.js"></script>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
<style>
|
||||
.tui-chart-vertical {
|
||||
position: relative;
|
||||
background-color: black;
|
||||
}
|
||||
.tui-chart-horizontal {
|
||||
position: relative;
|
||||
background-color: black;
|
||||
}
|
||||
.tui-chart-vertical .tui-chart-display {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 30px;
|
||||
align-items: flex-end;
|
||||
border-bottom: 2px solid white;
|
||||
border-left: 2px solid white;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-display {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
top: 0px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 30px;
|
||||
align-items: stretch;
|
||||
border-bottom: 2px solid white;
|
||||
border-left: 2px solid white;
|
||||
}
|
||||
.tui-chart-x-axis {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
height: 30px;
|
||||
left: 50px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.tui-chart-y-axis {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 30px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.tui-chart-vertical .tui-chart-x-axis .tui-chart-legend {
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.tui-chart-vertical .tui-chart-y-axis .tui-chart-legend {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 2px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend {
|
||||
flex-basis: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.tui-chart-vertical .tui-chart-display .tui-chart-value {
|
||||
margin: 0px 30px;
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.tui-chart-horizontal .tui-chart-display .tui-chart-value {
|
||||
margin: 5px 0px;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="center">
|
||||
@@ -108,20 +16,31 @@
|
||||
<legend class="">Vertical Bar Chart</legend>
|
||||
<div class="tui-chart-vertical" style="width: 500px; height: 200px;">
|
||||
<div class="tui-chart-display">
|
||||
<div class="tui-chart-value red-168" style="height: 80%;">80%</div>
|
||||
<div class="tui-chart-value green-168" style="height: 60%;">60%</div>
|
||||
<div class="tui-chart-value blue-168" style="height: 100%;">100%</div>
|
||||
<div class="tui-chart-value red-168 animated" style="height: 80%;">80%</div>
|
||||
<div class="tui-chart-value green-168" style="height: 30%;">30%</div>
|
||||
<div class="tui-chart-value blue-168" style="height: 50%;">50%</div>
|
||||
<div class="tui-chart-value yellow-168" style="height: 90%;">90%</div>
|
||||
<div class="tui-chart-value purple-168" style="height: 60%;">60%</div>
|
||||
<div class="tui-chart-value orange-168" style="height: 100%;">100%</div>
|
||||
<div class="tui-chart-value cyan-168" style="height: 10%;">10%</div>
|
||||
<div class="tui-chart-value red-168" style="height: 75%;">75%</div>
|
||||
</div>
|
||||
<div class="tui-chart-y-axis">
|
||||
<div class="tui-chart-legend">100%</div>
|
||||
<div class="tui-chart-legend">75%</div>
|
||||
<div class="tui-chart-legend">50%</div>
|
||||
<div class="tui-chart-legend">25%</div>
|
||||
<div class="tui-chart-legend">80%</div>
|
||||
<div class="tui-chart-legend">60%</div>
|
||||
<div class="tui-chart-legend">40%</div>
|
||||
<div class="tui-chart-legend">20%</div>
|
||||
</div>
|
||||
<div class="tui-chart-x-axis">
|
||||
<div class="tui-chart-legend">2018</div>
|
||||
<div class="tui-chart-legend">2019</div>
|
||||
<div class="tui-chart-legend">2020</div>
|
||||
<div class="tui-chart-legend">s1</div>
|
||||
<div class="tui-chart-legend">s2</div>
|
||||
<div class="tui-chart-legend">s3</div>
|
||||
<div class="tui-chart-legend">s4</div>
|
||||
<div class="tui-chart-legend">s5</div>
|
||||
<div class="tui-chart-legend">s6</div>
|
||||
<div class="tui-chart-legend">s7</div>
|
||||
<div class="tui-chart-legend">s8</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
@@ -151,5 +70,22 @@
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
<div class="tui-window black-168 left-align">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="">Chart (no axis legend)</legend>
|
||||
<div class="tui-chart-vertical" style="width: 500px; height: 200px;">
|
||||
<div class="tui-chart-display no-x-axis no-y-axis">
|
||||
<div class="tui-chart-value red-168 animated" style="height: 50%;">50%</div>
|
||||
<div class="tui-chart-value green-168" style="height: 70%;">70%</div>
|
||||
<div class="tui-chart-value blue-168" style="height: 30%;">30%</div>
|
||||
<div class="tui-chart-value yellow-168" style="height: 100%;">100%</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user